- 版本信息
"element-ui": "^2.8.2",
"vue-i18n": "^6.0.0",
- main.js
import VueI18n from 'vue-i18n'
import messages from './lang'
import locale from 'element-ui/lib/locale'
import localLang from './lang/localLang.js'
// 国际化
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: localLang.langNow, // set locale
messages // set locale messages
})
locale.i18n((key, value) => i18n.t(key, value)) // 重点:为了实现element插件的多语言切换
-
多语言结构目录
多语言结构目录
- 代码
// index.js
import en from './en/index.js'
import zh from './zh/index.js'
export default {
en: en,
zh: zh
}
// localLang.js
let langNow
window.localStorage.clear()
if (window.localStorage.getItem('lang')) {
window.localStorage.getItem('lang')
} else {
window.localStorage.setItem('lang', 'en')
langNow = 'en'
}
export default {
langNow
}
// zh 文件夹 index.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN.js'
import a from './a.js'
export default {
...a,
...zhLocale
}
// zh 文件夹 a.js 这里可以写对应页面的语言
import img1 from '../../assets/login/user2.png'
export default {
a_message: {
hello: '你好12'
},
imgUrl: {
img1: img1
}
}
en文件夹省略, 大致和zh文件夹一样。
- .vue文件的语言引用
// html
<p>{{ $t('a_message.hello') }}</p>
<img :src=" $t('imgUrl.img1') " alt="">
// js
let str = this.$t("message.hello")
rules: {
name: [
{ required: true, message: str , trigger: 'blur' },
{ min: 1, max: 20, message: str , trigger: 'blur' }
]
}
大致就这样了
网友评论