1.安装
npm install vue-i18n --save
2.体会多语言切换
hello-i18n 示例工程 - DCloud 插件市场
这里面是一个官方的demo可以参考并且把它下载运行起来体会一下语言切换
uni-app官网
这个是uniapp的官方文档可以做参考(项目着急的话,直接可以参考下面的文章)
3.将语言包导入到自己的项目
把从官方里面的那个demo项目里面的local文件夹直接复制到自己的项目根目录里面,跟demo一样
4.main.js 引入并初始化 VueI18n
import en from './en.json' import zhHans from './zh-Hans.json' import zhHant from './zh-Hant.json' const messages = { en, 'zh-Hans': zhHans, 'zh-Hant': zhHant } let i18nConfig = { locale: uni.getLocale(),// 获取已设置的语言 messages } // VUE2 // #ifndef VUE3 import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n(i18nConfig) Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ i18n, ...App }) app.$mount() // #endif // VUE3 // #ifdef VUE3 import { createSSRApp } from 'vue' import { createI18n } from 'vue-i18n' const i18n = createI18n(i18nConfig) export function createApp() { const app = createSSRApp(App) app.use(i18n) return { app } }
5.使用
页面模板中使用 $t() 获取,并传递国际化json文件中定义的key,js中使用 this.$t('')
注意:页面中设置语言后需要调用 this.$i18n.locale = '要更改的语言' 后生效
6.可能刚开始会有坑
Fall back to translate ‘用户中心‘ key with ‘zh‘ locale.这样类似的问题
1.一般情况下是没有定义’xxxx’字段对应的翻译
2.仔细看一下要更改的语言与下面的K值是否匹配的上