vue项目进行国际化的详细介绍(采用element-UI国际化的思想)
- 一,前期搭建环境部分
1) 对一个已有的vue项目,引入vue-i18n 资源包
npm install vue-i18n
//npm i element-ui -S
2) 新建对应的 (zh.json / en.json) 文件 路径随意 ,及json内容格式填写
3)在main.js (App.vue 平级) 引入(添加部分)对应的配置信息
import elementUI from 'element-ui'
import VueI18n from 'vue-i18n' //1.引入国际化插件,导入相关
//element ui的语言引入
import locale from 'element-ui/lib//locale'
//导入iview
import enLocale from '../node_modules/element-ui/lib/locale/lang/en'
import zhLocale from '../node_modules/element-ui/lib/locale/lang/zh-CN'
//自定义语言包的导入
import en from './i18n/language_en/en.json'
import zh from './i18n/language_zh/zh.json'
Vue.use(elementUI, { locale }) //使用elementui 中的locale
Vue.use(elementUI)
Vue.use(VueI18n) //2.挂载国际化插件
//3.实例化一个对象
const i18n = new VueI18n({
// 3.语言标识,寻找本地local值 存储的 没有则 默认中文(zh)
locale: localStorage.getItem('locale') || 'zh',
messages: { //语言文件
en: Object.assign(en, enLocale),//英文
zh: Object.assign(zh, zhLocale)//中文
}
})
locale.i18n((key, value) => i18n.t(key, value)) //4.element ui组件的语言自动切换
//Vue.use(elementUI,{
// i18n: (key, value) => i18n.t(key, value)
//})
//vue实例中应用 i18n
new Vue({
render: h => h(App),
router,
i18n
}).$mount('#app')
4)找个vue 页面 ,或者login.vue 进行接下来得操作,
实现代码:
<div style="text-align:center;margin-top:30px;color:RGB(1,92,242);">
<span @click="changeLang('zh')">中文</span> ||
<span @click="changeLang('en')">English</span>
</div>
//防止进入后台后,locale属性值不存在
mounted(){
let localVal=localStorage.getItem('lcoale')
if(localVal===null){
localStorage.setItem('locale','zh')
this.$i18n.locale = localStorage.getItem("locale");
}else{
localStorage.setItem('locale',localVal)
this.$i18n.locale = localStorage.getItem("locale");
}
},
methods: {
//语言切换
changeLang(lang) {
//存储到localStorage中,刷新时能够保存当前的locale
//切换为中文
if (lang === "zh") {
localStorage.removeItem("locale");
localStorage.setItem("locale", "zh");
this.$i18n.locale = localStorage.getItem("locale");
}
//切换为英文
else if (lang === "en") {
localStorage.removeItem("locale");
localStorage.setItem("locale", "en");
this.$i18n.locale = localStorage.getItem("locale");
}
},
}
- 二,vue项目国际化格式实战部分(从易到难)
1) 纯文本:
<div>
登录
</div>
<div>
{{$t('loginPage.login_btn')}}
</div>
2) 标签属性级别的:
<div
placeholder="小熊"
title="小熊"
label="小熊">
</div>
<div
:placeholder="$t('loginPage.login_placeHolder_password')"
:title="$t('loginPage.login_placeHolder_password')"
:label="$t('packagePage.List_ID')">
</div>
3)data(){} 级别
data(){
play_areas: [{
value: '',
//label: '所有'
label: this.$t('packagePage.List_All')
}, {
value: 1,
//label: '主体'
label: this.$t('packagePage.List_Main')
}, {
value: 2,
//label: '副体'
label: this.$t('packagePage.List_Sub')
}],
// 数组
opinion:[
this.$i18n.locale === "zh" ?"状态":"status",
this.$i18n.locale === "zh" ?"拒绝":"reject",
]
}
- method: {} 级别
method: {
async login(){
//this.title = "用户名或密码不正确"
this.title=this.$t('loginPage.login_username_password_title')
}
this.$message({
type: 'info',
message: this.$t('aboutProPage.download_cancel')
})
this.$confirm(
this.$t('aboutProPage.areyouok_play')+ `【${item.filename}】`,
this.$t('aboutProPage.continue'),
this.$t('aboutProPage.tip'), {
confirmButtonText: this.$t('aboutProPage.confirm'),
cancelButtonText: this.$t('aboutProPage.cancel'),
type: 'warning'
})
}
- js 文件级别
let menu = {
workbench: {
name: localStorage.getItem('locale')==='zh'?'后台首页':'Home',
icon: 'fa fa-bars',
index:1,
show: account.authorityID.includes(41),
data: [
{
name: localStorage.getItem('locale')==='zh'?'后台首页':'Home',
path: '/default',
show: true
}
]
},