vue2如何使用vue-i18n搭建多語言切換環(huán)境
更新時間：2023年12月07日 11:12:01 作者：小沐°
這篇文章主要介紹了vue2-使用vue-i18n搭建多語言切換環(huán)境的相關(guān)知識,在data(){}中獲取的變量存在更新this.$i18n.locale的值時無法自動切換的問題,需要刷新頁面才能切換語言,感興趣的朋友一起看看吧
安裝
注意：vue2.0要用8版本的，使用9版本的會報錯
npm install vue-i18n@8.27.0 --save
創(chuàng)建相關(guān)的語言包文件
在src目錄下，新建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 {
//中文
變量名:"中文"
}
en.js
export default {
//英文
變量名:"英文"
}
index.js
import Vue from "vue"
import VueI18n from "vue-i18n"
//引入自定義語言配置
import zh from './langs/zh'
import en from './langs/en'
import fan from './langs/fan'
Vue.use(VueI18n); // 全局注冊國際化包
// 準備翻譯的語言環(huán)境信息
const i18n = new VueI18n({
locale: sessionStorage.getItem('lang') || "簡", //將語言標識存入localStorage或sessionStorage中，首次默認中文顯示，非首次則以localStorage為準
messages: {
// 繁體語言包
'繁': {
...fan
},
// 中文語言包
'簡': {
...zh
},
//英文語言包
'ENG': {
...en
}
},
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: '簡', // 指定的locale沒有找到對應(yīng)的資源或當(dāng)前語種不存在時，默認設(shè)置當(dāng)前語種為中文
});
export default i18n在main里導(dǎo)入語言包文件
main.js
import i18n from './i18n'
Vue.use(
{
i18n: (key, value) => i18n.t(key, value) // 在注冊Element時設(shè)置i18n的處理方法,可以實現(xiàn)當(dāng)點擊切換按鈕后，elementUI可以自動調(diào)用.js語言文件實現(xiàn)多語言切換
}
)
new Vue({
render: h => h(App),
i18n
}).$mount('#app')切換語言
this.$i18n.locale = "ENG";//切換為英文
基本使用
1.在模板字符串中使用
{{ $t("變量名") }}
<button>{{ $t("submit") }}</button>
2.綁定屬性使用
:屬性名="$t('變量名')"
<input type="text" :placeholder="$t('FromSub.content.placeholder1')"/>3.在script中使用
this.$t('變量名')注意：用這種方法在data(){}中獲取的變量存在更新this.$i18n.locale的值時無法自動切換的問題，需要刷新頁面才能切換語言。
解決方案：
1）調(diào)整寫法
2）寫在計算屬性computed:{…}中，不要寫在data(){return{…}}中
到此這篇關(guān)于vue2-使用vue-i18n搭建多語言切換環(huán)境的文章就介紹到這了,更多相關(guān)vue-i18n多語言切換環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-types 在 Vue 3 中的使用主要適用于希望進行更細致的 prop 驗證的場景,尤其是在 JavaScript 項目中,這篇文章給大家介紹vue3中如何使用vue-types,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了vue遞歸生成樹狀結(jié)構(gòu)的示例,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
下面小編就為大家分享一篇在vue組件中使用axios的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
表格數(shù)據(jù)是websocket通信獲取的數(shù)據(jù),首次獲取20條數(shù)據(jù),以后新增訂閱獲取一條,新增一條則向上滑動顯示最新數(shù)據(jù),本文給大家介紹Element-plus使用中遇到的問題小結(jié),感興趣的朋友跟隨小編一起看看吧2024-04-04
Javascript vue.js表格分頁，ajax異步加載數(shù)據(jù)
這篇文章主要介紹了Javascript vue.js表格分頁，ajax異步加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-10-10
vue實現(xiàn)定義一個全局實例Vue.prototype
這篇文章主要介紹了vue實現(xiàn)定義一個全局實例Vue.prototype，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
本文給大家分享了VUE制作點擊按鈕出現(xiàn)水波紋效果的組件過程，對此有需求的朋友可以跟著學(xué)習(xí)下。2018-04-04
這篇文章主要介紹了vue實現(xiàn)自定義el-table穿梭框功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
關(guān)于vue-router的beforeEach無限循環(huán)的問題解決
本篇文章主要介紹了關(guān)于vue-router的beforeEach無限循環(huán)的問題解決，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
Vue中實現(xiàn)動態(tài)更新JSON數(shù)據(jù)的三種方式
在 Vue 項目中動態(tài)更新 JSON 數(shù)據(jù),可以通過以下幾種方式實現(xiàn),具體方法取決于你的需求,比如數(shù)據(jù)是存儲在前端還是后端、是否需要持久化等,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下2025-04-04