vue2如何使用vue-i18n搭建多語言切換環(huán)境
更新時間：2023年12月07日 11:12:01 作者：小沐°
這篇文章主要介紹了vue2-使用vue-i18n搭建多語言切換環(huán)境的相關知識,在data(){}中獲取的變量存在更新this.$i18n.locale的值時無法自動切換的問題,需要刷新頁面才能切換語言,感興趣的朋友一起看看吧
安裝
注意：vue2.0要用8版本的，使用9版本的會報錯
npm install vue-i18n@8.27.0 --save
創(chuàng)建相關的語言包文件
在src目錄下，新建i18n文件夾
在新文件夾i18n中新建langs文件夾，里邊放語言文本文件.js
zh.js：存放所有的中文顯示內(nèi)容
en.js：存放所有的英文顯示內(nèi)容
與langs文件夾同級，創(chuàng)建index.js：用于配置i18n，并導出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沒有找到對應的資源或當前語種不存在時，默認設置當前語種為中文
});
export default i18n在main里導入語言包文件
main.js
import i18n from './i18n'
Vue.use(
{
i18n: (key, value) => i18n.t(key, value) // 在注冊Element時設置i18n的處理方法,可以實現(xiàn)當點擊切換按鈕后，elementUI可以自動調用.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）調整寫法
2）寫在計算屬性computed:{…}中，不要寫在data(){return{…}}中
到此這篇關于vue2-使用vue-i18n搭建多語言切換環(huán)境的文章就介紹到這了,更多相關vue-i18n多語言切換環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue關于數(shù)據(jù)綁定出錯解決辦法的相關資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了web項目開發(fā)中VUE的混入與繼承原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2021-09-09
UniApp是一個跨平臺的前端框架,它允許開發(fā)者使用一套代碼構建同時運行在微信小程序、H5、iOS、Android等多個平臺的應用,在UniApp中,上傳圖片通常涉及到使用其提供的File?API或者第三方插件來進行操作,所以本文給大家介紹了Uniapp圖片上傳的兩種實現(xiàn)方式2025-10-10
vue-class-setup?編寫?class?風格組合式API
這篇文章主要為大家介紹了vue-class-setup?編寫?class?風格組合式API，支持Vue2和Vue3，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本文主要介紹了使用Elemen加上lang=“ts“后編譯報錯，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
俄羅斯方塊這個游戲相信大家都玩過,下面這篇文章主要給大家介紹了關于如何利用vue3實現(xiàn)一個俄羅斯方塊的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
Vue2中路由參數(shù)($route.params和$route.query)的使用方法詳解
這篇文章主要為大家詳細介紹了Vue2中路由參數(shù)($route.params和$route.query)的使用方法,包括動態(tài)路徑參數(shù)和URL查詢參數(shù)的獲取,并提供了多種寫法示例,希望對大家有所幫助2026-05-05
vite+ts vite.config.ts使用path報錯問題及解決
這篇文章主要介紹了vite+ts vite.config.ts使用path報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue2 router 動態(tài)傳參,多個參數(shù)的實例
下面小編就為大家?guī)硪黄獀ue2 router 動態(tài)傳參,多個參數(shù)的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
在前后端的開發(fā)中總是難免會遇到前后端的跨域問題,下面這篇文章主要給大家介紹了關于vue2中vue.config.js簡單配置代理跨域的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01