本文作者:问几许

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

问几许 4年前 ( 2018-06-25 ) 1927 抢沙发
使用 vue-i18n 切换中英文及更多语言插件摘要: 兼容支持 Vue.js 2.x 以上版本安装方法:npm install vue-i18n      ...

微信截图_20180625141724.png

兼容

支持 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 的官方文档 。


文章版权及转载声明

作者:问几许本文地址:https://wenjixu.com/blog/39.html发布于 4年前 ( 2018-06-25 )
文章转载或复制请以超链接形式并注明出处问几许

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,1927人围观)参与讨论

还没有评论,来说两句吧...