作者:麦尔小哈PICA | 来源:互联网 | 2023-08-15 20:25
需求:根据浏览器语言自动切换语言1.安装vue-i18n,yarn安装$yarnaddvue-i18nnpm安装$npminstallvue-i18n2.导入语言包src下创建lang文件夹,定义zh.js,en.js……zh.jsexportdefault{part1:{n
需求:根据浏览器语言自动切换语言
1.安装vue-i18n,
yarn安装
$ yarn add vue-i18n
npm安装
$ npm install vue-i18n
2.导入语言包
src下创建lang文件夹,定义zh.js,en.js……
zh.js
export default{
part1 : {
name:'姓名',
nation:'地区'
}
part2 : {
gender:'性别'
}
}
en.js
export default{
part1 : {
name:'name',
nation:'nation'
}
part2 : {
gender:'gender'
}
}
3.在src下创建一个文件夹tools,
定义两个文件,一个是i81n.js,一个是lang.js
4.i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
//导入语言包
import Zh from '../lang/zh.js'; // 中文语言包
import En from '../lang/en.js'; // 英文语言包
const messages = {
zh: Zh, // 中文语言包
en: En, // 英文语言包
}
export default new VueI18n({
locale: 'zh', // set locale 默认显示中文
fallbackLocale: 'en', //如果语言包没有,则默认从英语中抽取
messages: messages // set locale messages
});
5.lang.js
export default function lang() {
let lang = navigator.language; //浏览器语言判断
lang = lang.substr(0, 2);
switch (lang) {
case 'zh': //中文
lang = 'zh';
break;
case 'en': //英文
lang = 'en';
break;
default:
lang = 'en';
}
return lang;
}
6.main.js中导入i18n.js以及lang.js
//引入多语言支持
import i18n from './tools/i18n.js'
import lang from './tools/lang.js'
window.lang = lang
new Vue({
i18n, //挂载i18n
router,
store,
Axios,
render: h => h(App)
}).$mount('#app')
7.使用
挂载到页面
{{$t('part1.name')}}
{{$t('part2.gender')}}
js中使用
document.title = this.$t("part1.nation");
页面使用语言
created: function() {
//切换语言
this.$i18n.locale = lang();
}
vue-i18n可能出现的问题