uniapp引入vue 4年前

首先目录结构是这样的

ch.js

copy
export default {
    index: {
        msg: '信息'
    }
}

en.js

copy
export default {
    index: {
        msg: 'information'
    }
}

index.js

copy
// 引入文件
import LangEn from './en.js'
import LangChs from './ch.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) {
            // 存到storage里面，后续操作都需要用到
            uni.setStorageSync('system_info', res);
        }
    })
}
// 如果他的设备默认语言是英文的话就用英文，否则用中文；
const cur_lang = system_info.language == 'en' ? 'en' : 'zh_CN'
const i18n = new VueI18n({
    locale: cur_lang || 'zh_CN', // 默认选择的语言
    /* 如果需要其他语言，在lib文件夹下创建js文件，引入，并在下面messages导入即可 */
    messages: {
        'en': LangEn,
        'zh_CN': LangChs
    }
})
export default i18n

main.js

copy
import Vue from 'vue'
import App from './App'
import i18n from './lib/index.js' 
// 将其放到vue的原型上面
Vue.prototype._i18n = i18n

Vue.config.productionTip = false

App.mpType = 'app'

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

示例

copy
<template>
    <view class="container">
        <text>{{ i18n.msg }}</text>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        //  利用计算属性来判断当前是中文还是英文
        computed: {
            i18n() {
                return this.$t('index')
            }
        },
    }
</script>

vue-i18n文件转移到网盘

https://pan.baidu.com/s/11uSOpBwlCXEvp79_D3ktpQ，提取码：s7gv