uni-app 使用vue-i18n实现国际化语言切换

1.我们需要vue-i18n的js文件，官方下载地址 https://unpkg.com/[email protected]/dist/vue-i18n.js
或者在https://gitee.com/TANJIE-2020/vue-i18n下载demo源码，将demo源码中的lang文件直接考到项目目录；

2.1 将在源码下载后的文件包中的 lang 文件放到 uni-app 项目的根目录下

image.png

2.1 或者将vue-i18n.js 文件下载下来后， 在 uni-app 项目 根目录下 新建一个 lang 文件夹；将vue-i18n.js 放入其中，为了方便后续语言切换，我们在新建两个js 文件 一个是 zh_CN.js(中文) 和 en_US.js（英文），最后在新建一个index.js 来使用他们；
index.js:

import LangEn from './en_US.js'
import LangCn from './zh_CN.js'
import Vue from 'vue'
import VueI18n from './vue-i18n'
Vue.use(VueI18n)
const system_info = uni.getStorageSync('system_info')
if (!system_info) {
    // 获取设备信息
    uni.getSystemInfo({
        success: function (res) {
            console.log('设备信息'+res)
            uni.setStorageSync('system_info', res);
        }
    })
}
    const cur_lang = system_info.language == 'en' ? 'en' : 'zh_CN'
    const i18n = new VueI18n({
        locale: cur_lang || 'zh_CN',  // 默认选择的语言
        messages: {  
                'en': LangEn,
                'zh_CN': LangCn
            }
    })
    export default i18n

zh_CN.js

export default {
    index: {
        title:'你好,UNI-APP',
        navBack:'返回',
        set:'设置',
        mine:'我的',
        navTitle:'菜单',
        currentSystemLang:'当前系统语言',
        langChange:'语言切换',
        navRightMenu:'菜单',
        tabBar:{home:'首页',shop:'商店',search:'搜索',mine:'我的'}
    },
    
}

en_US.js

export default {
    index: { // 首页语言
        title:'HELLO,UNI-APP',
        navBack:'back',
        set:'set',
        mine:'mine',
        navTitle:'menu',
        currentSystemLang:'Current system language',
        langChange:'Language switch',
        navRightMenu:'menu',
        tabBar:{home:'home',shop:'shop',search:'search',mine:'mine'}
    },
}

2.2 最后lang文件结构如下

image.png

3. 在main.js中引入

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false;

App.mpType = 'app';

import i18n from './lang/index' 
Vue.prototype._i18n = i18n

const app = new Vue({
    i18n,
    ...App
})
app.$mount()

4. 在页面中

顶部导航栏使用的是uni-ui自定义导航栏
底部tabBar使用的原生tabBar；

脚本代码

样式代码：

最后看看运行效果；
中文：

image.png

英文：

image.png