第一步 npm/yarn 下载Vue-i18n
如果项目中没有js-cookie则同样下载
yarn add vue-i18n
npm i vue-i18n -save
第二步 在src文件夹下新建一个language文件夹，内部新建四个文件。
分别为：index.js/lang.js/en.json/zh.json。如图
image
第三步，在en.json和zh.json两个文件中写入即将需要的中英文对照翻译。
如：
en.js
{
"main": {
"hello": "Hello"
},
"router": {
"maybe": "Maybe"
}
}
zh.js
{
"main": {
"hello": "你好"
},
"router": {
"maybe": "也许"
}
}
第四步，在index.js 和lang.js中
lang.js
export default {
setLang (lang) {
window.localStorage.setItem('user_lang', lang)
},
getLang (defaultLang) {
const localLang = window.localStorage.getItem('user_lang')
if (localLang === null) {
return defaultLang
} else {
return localLang
}
}
}
index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import LangStorage from './lang'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
const DEFAULT_LANG = 'zh'
const LOCALE_KEY = 'localeLanguage'
const locales = {
zh: Object.assign(require('./zh.json'), zhLocale),
en: Object.assign(require('./en.json'), enLocale)
}
const i18n = new VueI18n({
locale: LangStorage.getLang('zh'),
messages: locales
})
export const setup = lang => {
if (lang === undefined) {
lang = window.localStorage.getItem(LOCALE_KEY)
if (locales[lang] === undefined) {
lang = DEFAULT_LANG
}
}
console.log(lang)
window.localStorage.setItem(LOCALE_KEY, lang)
Object.keys(locales).forEach(lang => {
document.body.classList.remove(`lang-${lang}`)
})
document.body.classList.add(`lang-${lang}`)
document.body.setAttribute('lang', lang)
Vue.config.lang = lang
i18n.locale = lang
}
window.i18n = i18n
export default i18n
第五步，在main.js中
在main.js这引入i18n ，但需要将其放置于最上，如
import i18n from './language'
import Vue from 'vue'
然后 element-UI多语言化
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
})
将i18n注入到
var globalVm = new Vue({
el: '#app',
i18n, // 不可少
router,
store,
template: '<App/>',
components: {
App
}
})
第六步，在首页 头部添加button，绑定事件，切换语言。
<el-button @click="changeLanguage"><p>{{$t("main.language")}}</p> </el-button>
js
changeLanguage () {
// console.log(this.$i18n.locale)
if (this.$i18n.locale === 'en') {
setup('zh')
} else {
setup('en')
}
LangStorage.setLang(this.$i18n.locale)
}
好了，到此功能实现。下面就是添加变量了。在html中有两种方式，如
<-- 括号内单双引号皆可 -->
<span slot="title">{{ $t("main.hello"}}</span>
标签内的
<MenuGroup :title="$t('manage.province')">
<el-inpu :placeholder="$t('user.enterInformation')"></el-input>
script标签内 js部分中可以用this.$i18n.t('a.b')
然而在添加变量中仍然遇到不少的麻烦。
在data return 中 很难添加变量。但是如果是在data return中写了render，则可以 用单大括号来写 如
title: '操作', // 没有好的办法
key: 'action',
align: 'center',
render: (h, params) =>
<div>
{this.isShow ? <div>
{this.$store.getters.getUserRole.includes(this.base.key + '.u')
? <el-button type="primary" size="mini"
onClick={() => { this.editItem(params.row) }}>{this.$i18n.t('main.reviseInformation')}</el-button>
: ''}
{
}
</div> : '禁止操作'}
</div>
在.js文件中不能直接写。但是可以写成如下形式
在.js文件中
title123: 'main.hello'
在引用这个.js文件内容的html代码中
<div :title="$t(title123)"></div>
ok,以上就是整个项目多语言化时的步骤和遇到的问题。如果有其他问题，欢迎询问。
最近在这个翻译上遇到一个问题。即在data总不可以直接翻译。后来想起来i18n被挂载在window上。
data () {
return {
targetData: [{ name: window.i18n.t('lightRoad.group1')}]
}
}
