遨游建设网站,创建公司网站 教程,创世网站建设,公司企业邮箱注册申请这里以Vue2为例子
第一步#xff1a;安装vue-i18n
npm install vue-i18n8.26.5
第二步#xff1a;在src下创建js文件夹#xff0c;继续创建language文件夹 在language文件夹里面创建zh.js、en.js、index.js这仨文件
这仨文件代码分别如下#xff1a;
zh.js
export de…
这里以Vue2为例子
第一步安装vue-i18n
npm install vue-i18n8.26.5
第二步在src下创建js文件夹继续创建language文件夹 在language文件夹里面创建zh.js、en.js、index.js这仨文件
这仨文件代码分别如下
zh.js
export default {word1: 中国必然崛起,word2: 中文是伟大的语言,
} 小技巧Tip还可以用对象的方式加入语言内容譬如 word:{ label1: 中国必然崛起, label2: 中文是伟大的语言, } 在调用的时候就用$t(word.label1)、$t(word.label1)就可以了这样更加方便归类同一个栏目菜单下的词汇变量 en.js
export default {word1: China is NB,word2: Chinese is great language,
} index.js
import Vue from vue; import VueI18n from vue-i18n;//npm install vue-i18n8.26.5
Vue.use(VueI18n);
//引入国际化变量文件
import zh from ./zh;//中文
import en from ./en;//英语
// ...可以按照上面的方式继续添加其他语言
let messages { zh, en, };
let defaultLang zh;//默认是中文
Object.keys(messages).includes(localStorage.language) || (localStorage.language defaultLang);
let locale localStorage.language;
export default { locale, messages, defaultLang };
第三步在main.js文件里面引入i18n
// 【多国语言】----------------------------------------------------------------
import i18n from ./language;//引入多语言配置文件index.js//【初始化加载】----------------------------------------------------------------
import App from ../vue/App;
new Vue({el: #app,render: h h(App),router,store: vuex,i18n, //把i18n挂载在全局上
});
第四步应用文件
templatedivh1{{ $t(word1) }}/h1h2{{ $t(word2) }}/h2hrel-button clickchangeLanguage(zh) v-ifthis.$i18n.locale ! zh typesuccess中文/el-buttonel-button clickchangeLanguage(en) v-ifthis.$i18n.locale ! en typedanger英文/el-button/div
/template
script
import i18n from /js/language;//引入多语言配置文件index.js
export default {created() {this.addEvents();},methods: {changeLanguage(curLang) {Object.keys(i18n.messages).includes(curLang) || (curLang i18n.defaultLang);this.$i18n.locale curLang;localStorage.language curLang;},addEvents(d) {this.removeEvents();addEventListener(storage, this.storage);},removeEvents(d) {removeEventListener(storage, this.storage);},storage(e) {e.key language this.changeLanguage(e.newValue);// 监听手工修改localStorage.language;},}
};
/script
