使用 vue-i18n 切换中英文及更多语言插件

摘要： 兼容支持 Vue.js 2.x 以上版本安装方法：npm install vue-i18n      ...

兼容

支持 Vue.js 2.x 以上版本

安装方法：

npm install vue-i18n        
npm install cookie

安装cookie是为了保存语言习惯，每次打开网站获取的是上次选择的语言。

使用方法：

1、在 入口 js 文件main.js 中引入 vue-i18n （前提是要先引入 vue）

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

Vue.use(Vuex);
Vue.use(VueI18n);

let locale = Cookies.get('locale') ? Cookies.get('locale') : 'en';    //默认语言为英语

// Create VueI18n instance with options
const i18n = new VueI18n({
    locale: locale,    // 语言标识
    messages: {
        'zh': require('./common/lang/zh'),   // 中文语言包
        'en': require('./common/lang/en')    // 英文语言包
    }
});

// Create a Vue instance with `i18n` option
new Vue({
    el: '#app',
    router: router,
    store: store,
    i18n: i18n,
    render: h => h(App)
});

2、语言包示例

./common/lang/zh.js

// English
module.exports = {
    message: 'Hello'
}

./common/lang/en.js

// 中文
module.exports = {
    message: '你好！'
}

3、html

<div> {{ $t("message") }} </div>

3、语言切换

// 切换的点击事件 param[ 'zh' | 'en' | ... ]
changeLan(param) {
    let locale = this.$i18n.locale;
    if (locale != param) {
        this.$i18n.locale = param;
        Cookies.set('locale', param, { expires: 7 }); // 7天有效期
    }
};

这教程仅仅只是一个简单的i18n的使用，若要继续深层次了解使用请参考 VueI18n 的官方文档 。