uniapp +vue2 +i18n 单独js引用i18n

404 阅读1分钟

首先要在main.js文件中使用export导出i18n实例

    import Vue from 'vue'
    import App from './App'
    import uView from "uview-ui";
    import store from '@/store';
    // 引入语言包,注意路径
    import zh from '@/lang/zh.js';
    import en from '@/lang/en.js';
    // 引入并使用vue-i18n
    import VueI18n from 'vue-i18n'
    Vue.use(VueI18n)
    // 构造i18n对象
    const i18n = new VueI18n({
            // 默认语言,这里的local属性,对应message中的zh、en属性
            locale: 'en',
            // 引入语言文件
            messages: {
                    // 这里的属性名是任意的,您也可以把zh设置为cn等,只是后续切换语言时
                    // 要标识这里的语言属性,如:this.$i18n.locale = zh|en|zh|xxx
                    'zh': zh, // 这里为上面通过import引入的语言包
                    'en': en,
            }
    })
    export { i18n }
    // 由于微信小程序的运行机制问题,需声明如下一行,H5和APP非必填
    Vue.prototype._i18n = i18n
    let vuexStore = require("@/store/$u.mixin.js");
    Vue.config.productionTip = false

    App.mpType = 'app'
    Vue.use(uView);
    Vue.mixin(vuexStore);
    const app = new Vue({
      i18n,
      store,
      ...App
    })
    require('./common/http/request')(app)
    app.$mount()

单独的js引入i18n实例使用i18n.t(key)键值引入

    import { i18n } from '@/main'
    //使用
    i18n.t('product.title')

正常组件引入

    <view>{{$t(key)}}<view/>

script引入

    this.$t(key)

注意需要实时相应的话需要把data中的变量写到计算属性中