通常在
vue中，会使用vue-i18n来做页面语言的国际化。省的开发人员还自己去实现。这里就简单说下具体的用法。
安装
npm install vue-i18n
yarn add vue-i18n
加载
在
main.js中，这边是写了一个配置，用来专门配置多语言
// 国际化
import i18n from '@/util/language';
main.js
配置
在配置的
index.js页面里面，写了前端自动化，将该目录下的所有文件都加载进来。
/**
* 该文件将当前文件夹下的所有.js结尾的文件全部读取出来。
* 并导出去
*/
import VueI18n from 'vue-i18n'
import Vue from 'vue';
import * as cookie from '@/util/cookie.js';
Vue.use(VueI18n)
const files = require.context('.', true, /\.js$/)
const messages = {
zh: {},
en: {}
}
files.keys().forEach(key => {
// 过滤本身
if (key === './index.js') return;
// 切割key的首尾
const temp = key.replace('./', '').replace('.js', '').split('/');
const count = temp.length;
// 如果有子文件夹，导入文件夹名字和文件夹下的 index.js文件
if (count > 1 && temp[count - 1] !== 'index') return;
const config = files(key).default;
messages.zh[temp] = config.zh;
messages.en[temp] = config.en;
});
if (process.env.NODE_ENV === 'development') {
console.log(' == language ==', messages)
}
const getLocale = () => {
const key = 'alpsentekchkey';
const result = cookie.getCookie(key);
return result || 'zh';
}
const i18n = new VueI18n({
locale: getLocale(),
messages
})
export default i18n
页面语言配置
拿
language下的nav导航栏举例。这个文件配置了导航栏所需要的所有语言配置。
导航栏配置
配置完成后，整体的数据结构。对象里面分别有
zh和en两个版本。每个底下都配置了具体哪个页面需要的字段。
配置对象
页面上使用
配置好后，使用就很简单了。拿
nav举例。要拿到search的这个值，只要在页面写入{{$t('nav.search')}}，当然在js文件中也可以通过this.$t('nav.search')来拿到
<span>{{$t('nav.search')}}</span>
页面上使用
中英文切换
写一个
mixin，通过监听中英文切换按钮的时候，同时去执行this.$i18n.locale来改变全局的语言状态。
import {
mapGetters
} from 'vuex';
// 深度合并数据
export default {
data() {
return {}
},
mounted() {
},
watch: {
// 系统语言发生变化
zhcn: {
handler: function(newVal) {
try {
// 设置i18n的语言类型
this.$i18n.locale = newVal ? 'zh' : 'en';
document.title = this.$t('home.htmlTitle');
// 修改页面的文字
this.changePageLanguage();
} catch (e) {
// 页面中没有实现changePageLanguage的方法
}
},
deep: true,
}
},
computed: {
...mapGetters('language', ['zhcn', 'zhPageKey']),
...mapGetters(['isMobileBrowse']),
mobilePrefix() {
return this.isMobileBrowse ? '_mobile' : '_pc'
}
},
}
正常中英文状态都会存入到
cookie，如果cookie没有值的时候，可以用个拿当前浏览器的语言版本。
const jsSrc = (navigator.language || navigator.browserLanguage).toLowerCase();
if(jsSrc.indexOf('zh') >= 0){
// 假如浏览器语言是中文
} else if(jsSrc.indexOf('en') >= 0) {
// 假如浏览器语言是英文
}
