您现在的位置是:网站首页> 小程序设计
uniapp与vue-i18n实现国际化多语言
- 小程序设计
- 2021-03-17
- 866人已阅读
摘要
踩了很多坑,终于捣鼓出来了。可能是由于内容开始是网络地址(http://...)截取后不能换行造成 为避免代码造成手机端排版的混乱,可适当增加文字描述,将代码往后推移
main.js
import Vue from 'vue' import App from './App' import VueI18n from 'vue-i18n' Vue.use(VueI18n) Vue.config.productuinTip = false const i18n = new VueI18n({ locale: 'en-US', messages: { 'en-US': { index: { invite: 'Invite', game: 'Game' } }, 'zh-CN': { index: { invite: '邀请', game: '游戏' } } } }) Vue.prototype._i18n = i18n App.mpType = 'app' const app = new Vue({ i18n, ...App }) app.$mount()
uniapp 不支持在取值表达式中直接调方法,因此,$t方法不可用,所以通过计算属性的方式:
index.vue
<template> <view class="uni-content"> <text>{{ i18n.invite }}</text> <text>{{ i18n.game }}</text> </view> </template> <script> export default { computed: { i18n () { return this.$t('index') } } } </script> <style> </style>
上一篇:uniapp编译相关