本项目利用 VueI18n 组件进行国际化，使用之前，需要进行安装
$ npm install vue-i18n
一、框架引入步骤：
1. 先在 main.js 中引入 vue-i18n。
// 国际化插件
import utils from '@/config/cookieUtils'
import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 通过插件的形式挂载 let currentLang = utils.get('CurrentLang')
if (currentLang !== 'en-US') {
currentLang = 'zh-CN'
}
const i18n = new VueI18n({
locale: currentLang, // 语言标识
// this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh-CN': require('./lang/zh'), // 中文语言包
'en-US': require('./lang/en') // 英文语言包
}
})
2. 创建语言包文件
zh.js 代码：
export const m = {
home_page: '首页',
app_center: '应用中心',
document_center: '文档中心',
document: '文档',
plat_des: '平台概述',
API_des: 'API 简介',
front_comp: '前端组件',
ability_comp: '能力组件',
jicheng_center: '集成中心',
common_problem: '常见问题',
api_interface: 'API接口',
manager_controlle: '管理控制台',
service_controlle: '服务治理平台',
more: '更多',
haopingRank: '好评排行',
visitRank: '访问排行',
downloadRank: '下载排行'
}
en.js
export const m = {
home_page: 'Home',
app_center: 'App Center',
document_center: 'Document',
document: 'Document',
plat_des: 'Introduction',
API_des: 'API Introduction',
front_comp: 'Front Component',
ability_comp: 'Ability Component',
jicheng_center: 'Integration Center',
common_problem: 'Normal Problem',
api_interface: 'API Interface',
manager_controlle: 'Control',
service_controlle: 'Service Manage Control',
more: 'More',
haopingRank: 'Ping Rank',
visitRank: 'Visit Rank',
downloadRank: 'Download Rank'
}
3. 实现语言切换
data () {
return {
lang: utils.get('CurrentLang')
}
},
<a @click="changeLangEvent()" style="float:right; color:#fff;">切换语言</a>
changeLangEvent: function () {
this.$confirm('确定切换语言吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 切换语言
if (this.lang === 'zh-CN') {
this.lang = 'en-US'
} else {
this.lang = 'zh-CN'
}
this.$i18n.locale = this.lang // 关键语句
utils.set('CurrentLang', this.lang)
}).catch(() => {
this.$message({
type: 'info'
})
})
}
4. 接口层面实现多语言，方案为： 在HTTP请求头中携带语言信息，接口服务根据语言，返回不同的语言环境响应体。
本项目 vue.js 使用了 axios 组件，实现的话就统一在HTTP请求request拦截器中处理，代码如下：
// http request 拦截器
axios.interceptors.request.use(
config => {
// 语言环境设置
let currentLang = utils.get('CurrentLang')
if (currentLang === 'en-US') {
config.headers['X-Client-Language'] = 'en-US'
} else {
config.headers['X-Client-Language'] = 'zh-CN'
}
return config
},
err => {
return Promise.reject(err)
})
以上几个步骤就实现了前端的国际化框架引入。以下就是需要对每个有文字显示的地方进行处理。
二、文字显示调用方式：
1. 直接显示
<router-link to="/index">{{$t('m.home_page')}}</router-link>
2. 绑定方式调用：
<span v-text="$t('m.home_page')"></span>
3.JS调用字段值
this.$i18n.messages[this.$i18n.locale].m.manual
vm.$i18n.messages[vm.$i18n.locale].m.manual
三、Element-UI 组件的国际化
1. 在main.js中引入
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import locale from 'element-ui/lib/locale' 2. 语言包判断
if (currentLang === 'en-US') {
import('../static/css/en.css')
Vue.use(ElementUI, {enLocale})
locale.use(enLocale)
} else {
Vue.use(ElementUI, {zhLocale})
locale.use(zhLocale)
}