1.下载依赖包
npm install vue-i18n --save
2.在项目中src目录下新建文件夹i18n,在其下新建文件夹langs,其中存放各类语言js文件,如en.js、zh_CN.js
内部文件结构为:
/**zh.js文件**/
module.exports = {
menu : {
home:"首页"
},
content:{
main:"这里是内容"
}
}
/**en.js文件**/
module.exports = {
menu : {
home:"home"
},
content:{
main:"this is content"
}
}
src/i18n/i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import zh_CN from './langs/zh_CN/zh_CN';
import en_US from './langs/en/en_US';
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
Vue.use(VueI18n);
const messages = {
en_US: {
...en_US,
...enLocale,
},
zh_CN: {
...zh_CN,
...zhLocale,
},
};
const i18n = new VueI18n({
locale: localStorage.lang || 'zh_CN',
messages,
});
export default i18n;
3.main.js中配置
import i18n from './i18n/i18n'; //i18n国际化
Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value), //i18n国际化
});
window.vm = new Vue({
el: '#app',
i18n, //i18n国际化
router,
store,
render: (h) => h(App),
});
4.页面使用
//页面内
{
{$t('system.cancel'}}
window.vm.$i18n.t('system.cancel')
//js
this.$t('system.cancel')
5.注意点:
国际化文案内匹配自定义内容
this.$t('validate.range_length', ['5', '20']) //请输入长度为{0}到{1}之间的字符 将0-1改为5-20
6.加入设置使VSCode代码编辑器中实时显示中文:
在项目根目录的.vscode文件夹中setting.json中添加
{
"i18n-ally.localesPaths": ["src/i18n/langs"],
"i18n-ally.enabledParsers": ["json", "js"], //这个最好加上,如果是其他格式,如ts,不加上就无效了
"i18n-ally.keystyle": "nested", // 翻译路径格式,
"i18n-ally.sourceLanguage": "en", // 翻译源语言
"i18n-ally.displayLanguage": "zh_CN" //显示语言, 这里也可以设置显示英文为en,
// "i18n-ally.extract.keygenStrategy": "random", // 翻译字段命名采用随机字符 枚举['slug','random','empty']
// "i18n-ally.extract.keygenStyle": "camelCase", // 翻译字段命名样式采用驼峰
}