这里以Vue2为例子
第一步:安装vue-i18n
npm install vue-i18n@8.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-i18n@8.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挂载在全局上
});
第四步:应用文件
<template>
<div>
<h1>{{ $t('word1') }}</h1>
<h2>{{ $t('word2') }}</h2>
<hr>
<el-button @click="changeLanguage('zh')" v-if="this.$i18n.locale !== 'zh'" type="success">中文</el-button>
<el-button @click="changeLanguage('en')" v-if="this.$i18n.locale !== 'en'" type="danger">英文</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>