一、i18n的安裝
這個(gè)地方要注意自己的vue版本和i1n8的匹配程度，如果是vue2點(diǎn)幾，記得安裝i18n的@8版本，不然會(huì)自動(dòng)安裝的最新版本，后面會(huì)報(bào)錯(cuò)哦，查詢了下資料，好像最新版本是適配的vue3。
npm install vue-i18n@8 --save
二、新建i18n相關(guān)文件夾及文件
在src下面新建i18n文件夾，然后在里面新建index.js，里面的內(nèi)容如下
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import locale from 'element-ui/lib/locale';
Vue.use(VueI18n);
// 引入自定義的各個(gè)語言配置文件
import zh from './config/zh';
import en from './config/en';
//element-ui自帶多語言配置
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
import enLocale from 'element-ui/lib/locale/lang/en';
const messages = {
en: {
...en,
...enLocale
},
zh: {
...zh,
...zhLocale
},
}
// 創(chuàng)建vue-i18n實(shí)例i18n
const i18n = new VueI18n({
// 設(shè)置默認(rèn)語言
locale: localStorage.getItem('locale') || 'zh', // 語言標(biāo)識(shí),頁面對(duì)應(yīng)顯示相同的語言
// 添加多語言（每一個(gè)語言標(biāo)示對(duì)應(yīng)一個(gè)語言文件）
messages:messages,
})
// 非 vue 文件中使用這個(gè)方法
const translate = (localeKey) => {
const locale = localStorage.getItem("language") || "zh"
const hasKey = i18n.te(localeKey, locale) // 使用i18n的 te 方法來檢查是否能夠匹配到對(duì)應(yīng)鍵值
const translatedStr = i18n.t(localeKey)
if (hasKey) {
return translatedStr
}
return localeKey
}
locale.i18n((key, value) => i18n.t(key, value)) //為了實(shí)現(xiàn)element插件的多語言切換
// 暴露i18n
export {
i18n,
translate
};
新建i18n文件夾里面新建config文件夾，然后在里面新建en.js和zh.js
en.js代碼
const en = {
login:{
title:'I am the title',
}
}
export default en;
zh.js代碼
const zh = {
login:{
title:'我是標(biāo)題',
}
}
export default zh;
三、在main.js引入
主要是引入以后要在new Vue的地方加入 i18n,文章來源：http://www.zghlxwxcb.cn/news/detail-633182.html
import {i18n} from './i18n/index.js';
new Vue({
el: '#app',
i18n,
router,
store,
mounted() {
window.isfitVue = this;
},
components: { App },
template: '<App/>'
})
四、功能切換
<template>
<div>
<el-select v-model="languageValue" @change="changeLanguage" placeholder="請(qǐng)選擇">
<el-option
v-for="item in languageOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
languageValue:'',
languageOptions:[],
}
},
created() {
//最開始請(qǐng)求的時(shí)候看緩存是什么狀態(tài)
if(this.$i18n.locale=='zh'){
this.languageValue='中文簡體';
this.languageOptions=[{value:'en',label:'English'}]
}else{
this.languageValue='English';
this.languageOptions=[{value:'zh',label:'中文簡體'}]
}
},
methods: {
// 多語言切換
changeLanguage(type){
console.log(type);
// 此處做了語言選擇記錄，存在localStorage中，這里的作用只有一個(gè)當(dāng)我重新請(qǐng)求頁面
//的時(shí)候先取localStorage的記錄值
localStorage.setItem('locale',type)
this.$i18n.locale = type; // 修改頁面需要顯示的語言
if(this.$i18n.locale=='zh'){
this.languageValue='中文簡體';
this.languageOptions=[{value:'en',label:'English'}]
}else{
this.languageValue='English';
this.languageOptions=[{value:'zh',label:'中文簡體'}]
}
},
}
}
</script>
五、在vue文件里面的使用
在template中直接使用
<div>{{$t("login.title")}}</div>
//或者
<el-input :placeholder="$t('login.title')" ></el-input>
在script中加上this就行
this.$t('login.title'),
六、在單獨(dú)的js文件中使用
//導(dǎo)入 ，這里的路徑自己找一下自己的文件路徑
import { translate as $t } from "../../../../../i18n/index.js"
//使用
name: $t('login.title'),
七、如果需要在js文件中獲取當(dāng)前保存的狀態(tài)，也就是this.$i18n.locale
//導(dǎo)入，記得切換自己的路徑
import { i18n } from "../i18n/index.js"
//使用
console.log(i18n.locale)
if(i18n.locale=='en'){
}
八、寫在最后
這里面基本都是我使用的時(shí)候遇到問題單獨(dú)去查的資料，但是都寫得比較分散，比如我遇到了最開始的安裝問題，或者遇到了在js里面使用的問題，又需要去單獨(dú)的查資料說怎么使用的問題，所以想著說把自己遇到的問題都寫成一個(gè)合集，希望能幫助到更多跟我一樣的小伙伴，最后，如果有幫到您記得留言或點(diǎn)贊哦，會(huì)覺得很開心，覺得自己幫助到了人~~文章來源地址http://www.zghlxwxcb.cn/news/detail-633182.html
到了這里，關(guān)于用i18n 實(shí)現(xiàn)vue2+element UI的國際化多語言切換詳細(xì)步驟及代碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
