Vue項目通過vue-i18n實現國際化方案(推薦)
更新時間：2022年12月12日 14:58:39 作者：苪玫兒呀
這篇文章主要介紹了Vue項目通過vue-i18n實現國際化方案,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
Vue I18n官網 ：Vue I18n
1、安裝：
npm install vue-i18n --save
說明：直接下載最新版本的時候，出現了一個報錯，后來換回了低一點的版本（如：8.22.1版本），就沒出現把報錯了，具體的報錯如下：
Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘) 頁面一片空白
（具體原因目前還沒排查處理，如果大家有解決方案，歡迎評論留言~）
2、配置：
在src文件夾下，新建plugins文件夾，里邊有兩個語言文件包：en.json（英文語言包） 、zh.json（中文語言包）目錄如圖：
en.json文件：
{
"login": {
"loginBtn": "LOGIN",
"loginTitle": "User Login",
"userName": "Please enter username!",
"password": "Please enter password!"
}
}
zh.json文件：
{
"login": {
"loginBtn": "登錄",
"loginTitle": "用戶登錄",
"userName": "請輸入用戶名",
"password": "請輸入密碼"
}
}
i18n.js文件：
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
function loadLocaleMessages() {
const locales = require.context('./lang', true, /[A-Za-z0-9-_,\s]+\.json$/i) // 在vue項目中使用require.context()引入某個文件夾下所有文件
console.log('locales:', locales)
const messages = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key)
}
})
return messages
}
export default new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'zh', // 設置頁面的默認語言
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'zh',
messages: loadLocaleMessages()
})
此外，還要在vue.config.js文件中，配置以下內容：
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'i18n',
enableInSFC: true
}
},
main.js文件引入i18n
import i18n from './plugins/i18n/i18n.js' // 使用i18n實現國際化
console.log('i18n:', i18n)
i18n.locale = 'zh' // 初始化i18n，默認英文顯示
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#baseApp')
3、使用：
<el-button :loading="loading" type="primary" @click="subLogin">{{ $t('login.loginBtn') }}</el-button>
4、注意：語言包文件的數據持久化。
5、在xx.js文件中使用i18n的注意事項：
（方法一）：在main.js把Vue對象賦值給一個window上的一個對象vm
window.vm = new Vue({
el: '#app',
i18n,
router,
store,
template: '<App/>',
components: { App }
})
使用的時候就這樣用 ：
（方法二）：
存在的問題：上面的是關于登錄表單的校驗，如第一次默認語言是中文，能正確顯示校驗提示，但是切換語言后，比如英文，校驗提示還是顯示中文，并沒有同步切換回英文。
解決方案：
到此這篇關于Vue項目通過vue-i18n實現國際化方案的文章就介紹到這了,更多相關Vue vue-i18n實現國際化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vant-Dialog 彈出框的使用小結,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了基于Vue實現拖拽效果,文中給大家介紹了clientY pageY screenY layerY offsetY的區(qū)別講解，需要的朋友可以參考下2018-04-04
本文主要介紹了vite的搭建與使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要介紹了vuex的幾個屬性及其使用傳參,本文結合實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
詳解使用Vue.Js結合Jquery Ajax加載數據的兩種方式
本篇文章主要介紹了詳解使用Vue.Js結合Jquery Ajax加載數據的兩種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
前段時間看抖音，有人用時間輪盤作為動態(tài)的桌面壁紙，一時間成為全網最火的電腦屏保，后來小米等運用市場也出現了【時間輪盤】，有點像五行八卦，感覺很好玩，于是突發(fā)奇想，自己寫一個網頁版小DEMO玩玩,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue組件的層級關系，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
在vue中使用css modules替代scroped的方法
本篇文章主要介紹了在vue中使用css modules替代scroped的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue 對axios get pust put delete封裝的實例代碼
在本篇文章里我們給各位整理的是一篇關于vue 對axios get pust put delete封裝的實例代碼內容，有需要的朋友們可以參考下。2020-01-01
這篇文章主要介紹了基于Vue組件化的日期聯動選擇器的實現代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11