vue-i18n安装配置，运行

需求：根据浏览器语言自动切换语言

1.安装vue-i18n,

yarn安装

$ yarn add vue-i18n

npm安装

$ npm install vue-i18n

2.导入语言包

src下创建lang文件夹，定义zh.js,en.js……

zh.js

export default{
    part1 : {
            name:'姓名'，
            nation:'地区'
    }
     part2 : {
            gender:'性别'
    }
}

en.js

export default{
     part1 : {
            name:'name'，
            nation:'nation'
    }
     part2 : {
            gender:'gender'
    }
}

3.在src下创建一个文件夹tools，

定义两个文件，一个是i81n.js,一个是lang.js

4.i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

//导入语言包
import Zh from '../lang/zh.js'; // 中文语言包
import En from '../lang/en.js'; // 英文语言包

const messages = {
         zh: Zh, // 中文语言包
         en: En, // 英文语言包
}

export default new VueI18n({
    locale: 'zh', // set locale 默认显示中文
    fallbackLocale: 'en', //如果语言包没有，则默认从英语中抽取
    messages: messages // set locale messages
});

5.lang.js

export default function lang() {
    let lang = navigator.language; //浏览器语言判断
    lang = lang.substr(0, 2);
    switch (lang) {
        case 'zh': //中文
            lang = 'zh';
            break;
        case 'en': //英文
            lang = 'en';
            break;
        default:
            lang = 'en';
    }
    return lang;
}

6.main.js中导入i18n.js以及lang.js

//引入多语言支持
import i18n from './tools/i18n.js'
import lang from './tools/lang.js'
window.lang = lang

new Vue({
  i18n,     //挂载i18n
  router,
  store,
  Axios,
  render: h => h(App)
}).$mount('#app')

7.使用

挂载到页面

<p>{{$t('part1.name')}}</p>
<p>{{$t('part2.gender')}}</p>

js中使用

document.title = this.$t("part1.nation");

页面使用语言

created: function() {
    //切换语言
    this.$i18n.locale = lang();
}

vue-i18n可能出现的问题