Vue实现多语言（i18n）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue实现多语言（i18n）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

第一步

安装i18n插件。

npm install vue-i18n

第二步

在src目录下，创建一个【language】文件夹，并创建两个语言包js文件。
中文语言包：【zh.js】
英文语言包：【en.js】
Vue实现多语言（i18n）,vue.js,javascript,ecmascript

第三步

完善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>

切换：文章来源地址https://www.toymoban.com/news/detail-552537.html

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');
   }
}