vue项目国际化配置

国际化配置即多语言配置，使用到的插件是vue-i18n，本例中亦通过设置下拉选框，切换界面语言；

安装依赖

npm install vue-i18n@8.26.5 --save

亲测该版本有效～

在main.js中引入并尝试打印看下是否引入成功；

import VueI18n from 'vue-i18n'


console.log(VueI18n, 'VueI18n');

控制台输出则表明成功引入；

配置多语言文件

在项目asset目录下新建language/language文件夹，里面放置local_en.js和local_zh.js文件，

// local_zh.js
module.exports =  {
    "language": {
        "chinese": "中文",
        "english": "英文"
    },
    "menu": {
        "home": '首页',
        "ad_manage": '广告管理',
        "goods_manage": '货物管理'
    },
    "page": {
        "select_lang": "请选择所用语言"
    }
}

// local_en.js
module.exports =  {
    "language": {
        "chinese": "chinese",
        "english": "english"
    },
    "menu": {
        "home": "home",
        "ad_manage": "advertisement manage",
        "goods_manage": "goods manage"
    },
    "page": {
        "select_lang": "select language"
    }
}

在language文件夹下新建index.js文件，对上述两个文件利用i18配置；

import Vue from 'vue'
import VueI18n from 'vue-i18n'


Vue.use(VueI18n);
// 使用插件

const i18n = {
    locale: window.localStorage.getItem('info.lang') || 'zh', // 语言标识,第一次登录默认是中文
    messages: {
        zh: require('./language/local_zh'), // 汉语
        en: require('./language/local_en'), // 英语
        }
    }
    console.log(i18n.locale, 'locale');

export default i18n

在main.js中挂载i18n：

import i18n from './assets/language' // 引入多语言配置文件index.js

new Vue({
    el: '#app',
    router,
    i18n,
    components: { App },
    template: '',
    store
})

页面设置

配置完文件之后，就可以写相应页面并实现根据选择页面自动切换语言功能；

注意：

在模版字符串中要$t('')，在js中要这样使用：this.$t('')

若遇到如下情况：

"phone.title": "您确定要将设备'{phonename}'设为公开吗"

则替换时应：

title: this.$t('phone.title', {phonename: this.info.name}), 
// js中格式
// 其中，this.info.name就是js中变量