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

1.我们需要vue-i18n的js文件，官方下载地址 https://unpkg.com/vue-i18n@8.21.0/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

在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()

在页面中

<template>
    <view class="content">
        <uni-nav-bar left-icon="back" :left-text="i18n.navBack" :right-text="i18n.navRightMenu" :title="i18n.navTitle"></uni-nav-bar>
        <view class="text-area">
            <text class="title">{{i18n.title}}</text>
        </view>
        <view class="" style="margin: 100rpx;">
            {{i18n.currentSystemLang}}：{{system_lenguage}}
        </view>
        <view class="">
            <button type="warn" @click="changeLanguage">{{i18n.langChange}}</button>
        </view>
    </view>
</template>

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

脚本代码

<script>
    export default {
        data() {
            return {
                system_lenguage:'',
            }
        },
        onLoad() {
            const system_info = uni.getStorageSync('system_info')
            console.log(system_info)
            this.$data.system_lenguage = system_info.language;
        },
        onReady() {
            
        },
        methods: {
            changeLanguage(){
                console.log('语言切换')
                const system_info = uni.getStorageSync('system_info')
                this.$data.system_lenguage = system_info.language;
                system_info.language === 'en' ? system_info.language = this._i18n.locale = 'zh_CN' : system_info.language = this._i18n.locale = 'en'
                uni.setStorageSync('system_info',system_info)
                uni.setTabBarItem({index: 0,text: this.i18n.tabBar.home});
                uni.setTabBarItem({index: 1,text: this.i18n.tabBar.shop});
                uni.setTabBarItem({index: 2,text: this.i18n.tabBar.search});
                uni.setTabBarItem({index: 3,text: this.i18n.tabBar.mine});
                
                uni.reLaunch({
                    url: 'index'
                })
            }
        },
        computed: {  
            i18n () {  
                return this.$t('index')  
            },
        },
    }
</script>

样式代码：

<style>
    page{
        background-color: #FFFFFF;
    }
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

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

image.png

英文：

image.png

最后编辑于：2020.08.26 14:42:10