vue國際化 vue i18n的配置

2021-09-11 21:57:32 字數 2338 閱讀 4804

npm i -s element-ui vue-i18n js-cookie


複製**
zh.js


export default ,


login: ,


header: ,


footer: 


}en.js


export default ,


header: ,


footer: ,


login: 


}複製**
import vuei18n from 'vue-i18n'


import enlocale from './en'


import zhlocale from './zh'


const messages = ,


zh: 


}const i18n = new vuei18n()


export default i18n


複製**
import vue from 'vue'


import i18n from './lang'


vue.use(i18n)


new vue()


複製**
開始使用，新建.vue檔案。在頁面中通過$t()方法使用。

"common_header">


"12">


}"12">


type="primary" @click="login">}


複製**
由於我們vuei18n中定義的是中文，這是頁面顯示的'這是公共的頭部元件'，login: '登入'，修該vuei18n例項屬性locale的值為en，重新整理頁面，頁面顯示 'this is a common header component'，'login',說明多語言配置成功。

在頁面中加入切換語言的控制項：

"language" placeholder="請選擇語言" @change="changelanguage">


"item in languageoptions"


:key="item.value"


:label="item.label"


:value="item.value">


複製**
加入乙個選擇語言的下拉框，修改locale的值為選擇的語言。

changelanguage (language) 


複製**

切換語言時，頁面將自動完成語言型別的切換。

將language資訊儲存在cookie（之前已經安裝了js-cookie）。初始化從cookie中獲取。

const i18n = new vuei18n()


切換語言時候儲存到cookies


cookies.set('language', language)


複製**
這是再去重新整理頁面，將會採用最後我們儲存在cookie中的語言。

為了方便使用，切換時可以在vuex中儲存language資訊

changelanguage (v) 


在state中：


language: cookies.get('language') || 'zh'


複製**
根據當前的語言型別動態的計算。

languageoptions


() ,


]} else ,


]}  return languageoptions


}複製**
效果如下：

引用element的語言包

import elementenlocale from 'element-ui/lib/locale/lang/en'


import elementzhlocale from 'element-ui/lib/locale/lang/zh-cn'


複製**
新增到翻譯資訊

const messages = ,


zh: 


}複製**
相容[email protected]，修改main.js

vue.use(i18n)


修改為vue.use(elementui, )


複製**
頁面效果如下：

到這裡關於vue-i18n的使用以及介紹完了。

幾個關鍵點在於實現locale的自動切換、如何使語言資訊（$t()方法）、element-ui元件的多語言實現、相容性等。

語言國際化 vue i18n

安裝依賴包 npm i vue i18n s 在根目錄建立乙個 lang的資料夾,並且在lang資料夾內建立cn.js 和 en.js 開啟 main.js,注入vue例項中 import vue from vue import vuei18n from vue i18n 語言國際化 vue.use...

vue i18n和ElementUI國際化使用總結

vue i18n 安裝 npm install vue i18n 在main.js同級建i18n資料夾，並裡面建i18n.js langs資料夾，langs資料夾下建en.js cn.js 目錄如下 assets logo.png components helloworld.vue i18n i18...

Vue I18n國際化語言切換

近期業務需求，需要對原有專案進行國際化處理，該專案是基於vue2 vantui2.x的移動端h5spa專案。上網查閱了相關資料，大多推薦使用vue i18n國際化外掛程式來實現不同語言的切換。經過測試，已基本實現中文和英文兩種語言的切換。現在主流的前端ui框架也支援語言國際化，若專案中使用ui框架比...