安裝包
注意：vue2.0要用8版本的，使用9版本的會報(bào)錯(cuò)
npm install vue-i18n@8.27.0 --save
創(chuàng)建相關(guān)的語言包文件
在src目錄下，創(chuàng)建新的文件夾，命名為i18n
在文件夾i18n中新建langs文件夾，里邊放語言文件.js
zh.js：存放所有的中文顯示內(nèi)容
en.js：存放所有的英文顯示內(nèi)容
與langs文件夾同級，創(chuàng)建index.js：用于配置i18n，并導(dǎo)出i18n
zh.js
export default {
//中文
msg: {
msg1: '測試一',
msg2: '測試二',
msg3: '測試三',
message: "第一個(gè)值",
display: "第二個(gè)值",
// 材料列表的材料類型
materialType: {
nameSteel: '鋼材',
nameAlumialloy: '鋁合金',
nameCfrp: '碳纖維復(fù)合材料',
nameSoft: '軟材料',
nameOther: '其他',
},
}
}
en.js
export default {
//英文
msg: {
msg1: 'test one',
msg2: 'test two',
msg3: 'test three',
message: "first value",
display: "second value",
// 材料列表的材料類型
materialType: {
nameSteel: 'Steel',
nameAlumialloy: 'Aluminum alloy',
nameCfrp: 'Carbon Fiber Composites',
nameSoft: 'Soft Materials',
nameOther: 'Other',
},
}
}
index.js
import Vue from "vue"
import VueI18n from "vue-i18n"
//引入自定義語言配置
import zh from './langs/zh'
import en from './langs/en'
//引入U(xiǎn)I框架語言配置---elementui
import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
ElementLocale.i18n((key, value) => i18n.t(key, value)) //為了實(shí)現(xiàn)element插件的多語言切換
Vue.use(VueI18n); // 全局注冊國際化包
// 準(zhǔn)備翻譯的語言環(huán)境信息
const i18n = new VueI18n({
locale: localStorage.getItem('lang') || "zh", //將語言標(biāo)識存入localStorage或sessionStorage中，頁面刷新不會默認(rèn)中文顯示
messages: {
// 中文語言包
'zh': {
...zh,
...zhLocale
},
//英文語言包
'en': {
...en,
...enLocale
}
},
silentTranslationWarn: true, //解決vue-i18n黃色警告"value of key 'xxx' is not a string"和"cannot translate the value of keypath 'xxx'.use the value of keypath as default",可忽略
globalInjection: true, // 全局注入
fallbackLocale: 'zh', // 指定的locale沒有找到對應(yīng)的資源或當(dāng)前語種不存在時(shí)，默認(rèn)設(shè)置當(dāng)前語種為中文
});
export default i18n
在main里導(dǎo)入語言包文件
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ELEMENT from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/display.css'
import i18n from './i18n'
...
// Vue.use(ELEMENT)
Vue.use(ELEMENT,
{
i18n: (key, value) => i18n.t(key, value) // 在注冊Element時(shí)設(shè)置i18n的處理方法,可以實(shí)現(xiàn)當(dāng)點(diǎn)擊切換按鈕后，elementUI可以自動調(diào)用.js語言文件實(shí)現(xiàn)多語言切換
}
)
...
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
基本使用
使用方式一
<!-- 使用方式一，在模板字符串中使用 -->
<h1>使用方式一：</h1>
<h4>{{ $t('msg.msg1') }}</h4>
效果圖
使用方式二
<!-- 使用方式二，綁定屬性使用 -->
<h1>使用方式二：</h1>
<h4 v-text="$t('msg.msg2')"></h4>
<el-input :placeholder="$t('msg.msg2')"></el-input>
效果圖
使用方式三，在
<template>
<!-- 使用方式三，在script標(biāo)簽內(nèi)的data中先聲明變量，然后獲取到值，最后渲染到html中 -->
<h1>使用方式三：</h1>
<h4>{{ title }}</h4>
<h4 v-text="title"></h4>
<!-- 標(biāo)簽頁-->
<el-tabs @tab-click = "handleClick">
<el-tab-pane :label = "materialType[0].name" :name = "materialType[0].id" v-model="getSteel">
</el-tab-pane>
<el-tab-pane :label = "materialType[0].name" :name = "materialType[0].id" v-model="getAlumialloy">
</el-tab-pane>
<el-tab-pane :label = "materialType[0].name" :name = "materialType[0].id" v-model="getCfrp">
</el-tab-pane>
<el-tab-pane :label = "materialType[0].name" :name = "materialType[0].id" v-model="getSoft">
</el-tab-pane>
<el-tab-pane :label = "materialType[0].name" :name = "materialType[0].id" v-model="getOther">
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
name: '',
// 在data節(jié)點(diǎn)中使用
data () {
return {
title: this.$t('msg.msg3'), //this.$i18n.t('')也行
// 標(biāo)簽頁
materialType: [
{
id: '1',
// name: '鋼材'
name: this.$t('msg.materialType.nameSteel')
},
{
id: '2',
// name: '鋁合金'
name: this.$t('msg.materialType.nameAlumialloy')
},
{
id: '3',
// name: '碳纖維復(fù)合材料'
name: this.$t('msg.materialType.nameCfrp')
},
{
id: '4',
// name: '軟材料'
name: this.$t('msg.materialType.nameSoft')
},
{
id: '5',
// name: '其他'
name: this.$t('msg.materialType.nameOther')
}
],
}
},
// 在methods節(jié)點(diǎn)中使用
methods: {
console.log(this.$t('msg.materialType.nameOther'))
},
// 在 computed節(jié)點(diǎn)中使用
computed: {
infoX() {
return this.$t('msg.materialDetailsTitle3.infoX')
},
},
mounted() {},
}
</script>
效果圖
`
注意：這種方式存在更新this.$i18n.locale的值時(shí)無法自動切換的問題，需要刷新頁面才能切換語言。解決辦法主要有兩種：
解決辦法一：調(diào)整寫法
錯(cuò)誤的寫法為：
正確的寫法為：
解決方法二：寫在計(jì)算屬性computed:{…}中，不要寫在data(){return{…}}中
請查看官方討論貼，官方回復(fù)https://github.com/kazupon/vue-i18n/issues/271
使用方式四
<!-- 使用方式四，msgss存在多個(gè)值，使用了模板字符串，拿到msgss的值再拼接，構(gòu)成msg.message或者msg.display -->
<h1>使用方式四：存在多個(gè)值之間的切換</h1>
<h4>{{ $t(`msg.${msgss}`) }}</h4>
<button @click="changeWord">切換按鈕</button>
data () {
return {
// 定義變量用于切換不同的值,對應(yīng)著en.js和zh.js中的message和display
msgss:'message'
}
},
methods: {
// 用于不同的值
changeWord() {
if(this.msgss === 'message'){
this.msgss = 'display'
} else {
this.msgss = 'message'
}
}
}
效果圖
使用方式五
<!-- 使用elementui的翻譯包 -->
<h1>使用方式五：elementui的翻譯包</h1>
<h4>{{$t('el.colorpicker.confirm')}}</h4>
在‘node_modules/_element-ui@2.15.13@element-ui/lib/locale/lang中有elementui組件庫提供的語言包文件
效果圖
文章來源：http://www.zghlxwxcb.cn/news/detail-728106.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-728106.html
切換語言
<!-- 切換語言 -->
<h1>切換語言方式</h1>
<button @click="switchLang">切換語言</button>
<el-select @change="langChange" placeholder="請選擇語言">
<el-option v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
options:[
{
value:'zh',
label:'中文'
},
{
value: 'en',
label: 'English'
}
],
switchLang(){
// 讀取緩存
let lang = localStorage.getItem('lang') ? localStorage.getItem('lang') : 'zh'
if (lang === 'zh') {
this.$i18n.locale = 'en'
localStorage.setItem('lang', 'en') // en表示英文，zh表示中文，可根據(jù)自己喜好設(shè)定，盡量通俗易懂
} else {
this.$i18n.locale = 'zh'
localStorage.setItem('lang', 'zh')
}
location.replace(location) //刷新網(wǎng)頁
},
langChange(e){
// this.$nextTick無法修改方式三
this.$nextTick(() => {
localStorage.setItem('lang', e)
this.$i18n.locale = e
})
// location.replace(location)
},
到了這里，關(guān)于vue2+element-ui使用vue-i18n進(jìn)行國際化的多語言/國際化的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
