Vue实现多语言（i18n）

第一步

安装i18n插件。

npm install vue-i18n

第二步

在src目录下，创建一个【language】文件夹，并创建两个语言包js文件。
中文语言包：【zh.js】
英文语言包：【en.js】

第三步

完善en.js文件和zh.js文件。两个文件的结构要相同。如果用Element-UI，这里导入。
en.js

import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
    'system' : {
        'home' : 'Home'
    },
    'button': {
        'login': 'Login'
    },
    'table' : {

    },
    'detail' : {

    },
    ...enLocale
}
export default en

zh.js

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const zh = {
    'system' : {
        'home' : '首页'
    },
    'button': {
        'login': '登陆'
    },
    'table' : {

    },
    'detail' : {

    },
    ...zhLocale
}
export default zh

第四步

在main.js引入插件。

//i18n插件
import VueI18n from 'vue-i18n';
// element-ui多语言文件
import locale from 'element-ui/lib/locale';

// 本地多语言文件
import zh from "./language/zh";
import en from "./language/en";


Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: sessionStorage.getItem('locale') || 'zh',
    messages: {
        zh: zh,
        en: en
    }
});


locale.i18n((key, value) => i18n.t(key, value))

new Vue({
    router,
    i18n,
    render: h => h(App)
}).$mount('#app');

第五步

在页面上使用和切换。
使用：

<el-button type="primary" @click="submitForm()">{{$t("button.login")}}</el-button>

切换：

switchLanguage() {
    //先获取当前语言,
   var locale = sessionStorage.getItem('locale') || 'zh';
   if(locale == 'en') {
       this.$i18n.locale = 'zh';
       sessionStorage.setItem('locale','zh');
   } else {
       this.$i18n.locale = 'en';
       sessionStorage.setItem('locale','en');
   }
}