快捷導(dǎo)航

vue2如何使用vue-i18n搭建多語(yǔ)言切換環(huán)境

更新時(shí)間：2023年12月07日 11:12:01 作者：小沐°

這篇文章主要介紹了vue2-使用vue-i18n搭建多語(yǔ)言切換環(huán)境的相關(guān)知識(shí),在data(){}中獲取的變量存在更新this.$i18n.locale的值時(shí)無(wú)法自動(dòng)切換的問(wèn)題,需要刷新頁(yè)面才能切換語(yǔ)言,感興趣的朋友一起看看吧

安裝

注意：vue2.0要用8版本的，使用9版本的會(huì)報(bào)錯(cuò)

npm install vue-i18n@8.27.0 --save

創(chuàng)建相關(guān)的語(yǔ)言包文件

在src目錄下，新建i18n文件夾

在新文件夾i18n中新建langs文件夾，里邊放語(yǔ)言文本文件.js
zh.js：存放所有的中文顯示內(nèi)容
  en.js：存放所有的英文顯示內(nèi)容
與langs文件夾同級(jí)，創(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"
//引入自定義語(yǔ)言配置  
import zh from './langs/zh'
import en from './langs/en'
import fan from './langs/fan'
Vue.use(VueI18n); // 全局注冊(cè)國(guó)際化包
// 準(zhǔn)備翻譯的語(yǔ)言環(huán)境信息
const i18n = new VueI18n({
  locale: sessionStorage.getItem('lang') || "簡(jiǎn)", //將語(yǔ)言標(biāo)識(shí)存入localStorage或sessionStorage中，首次默認(rèn)中文顯示，非首次則以localStorage為準(zhǔn)
  messages: {
    // 繁體語(yǔ)言包
    '繁': {
      ...fan
    },
    // 中文語(yǔ)言包
    '簡(jiǎn)': {
      ...zh
    },
    //英文語(yǔ)言包
    '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: '簡(jiǎn)', // 指定的locale沒(méi)有找到對(duì)應(yīng)的資源或當(dāng)前語(yǔ)種不存在時(shí)，默認(rèn)設(shè)置當(dāng)前語(yǔ)種為中文
});
export default i18n

在main里導(dǎo)入語(yǔ)言包文件

main.js

import i18n from './i18n'
Vue.use(
  {
    i18n: (key, value) => i18n.t(key, value) // 在注冊(cè)Element時(shí)設(shè)置i18n的處理方法,可以實(shí)現(xiàn)當(dāng)點(diǎn)擊切換按鈕后，elementUI可以自動(dòng)調(diào)用.js語(yǔ)言文件實(shí)現(xiàn)多語(yǔ)言切換
  }
)
new Vue({
  render: h => h(App),
  i18n
}).$mount('#app')

切換語(yǔ)言

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的值時(shí)無(wú)法自動(dòng)切換的問(wèn)題，需要刷新頁(yè)面才能切換語(yǔ)言。

解決方案：

1）調(diào)整寫(xiě)法

2）寫(xiě)在計(jì)算屬性computed:{…}中，不要寫(xiě)在data(){return{…}}中

到此這篇關(guān)于vue2-使用vue-i18n搭建多語(yǔ)言切換環(huán)境的文章就介紹到這了,更多相關(guān)vue-i18n多語(yǔ)言切換環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: