Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案(推薦)
Vue I18n官網(wǎng) :Vue I18n
1、安裝:
npm install vue-i18n --save
說(shuō)明:直接下載最新版本的時(shí)候,出現(xiàn)了一個(gè)報(bào)錯(cuò),后來(lái)?yè)Q回了低一點(diǎn)的版本(如:8.22.1版本),就沒(méi)出現(xiàn)把報(bào)錯(cuò)了,具體的報(bào)錯(cuò)如下:
Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘) 頁(yè)面一片空白
(具體原因目前還沒(méi)排查處理,如果大家有解決方案,歡迎評(píng)論留言~)
2、配置:
在src文件夾下,新建plugins文件夾,里邊有兩個(gè)語(yǔ)言文件包:en.json(英文語(yǔ)言包) 、zh.json(中文語(yǔ)言包)目錄如圖:
en.json文件:
{ "login": { "loginBtn": "LOGIN", "loginTitle": "User Login", "userName": "Please enter username!", "password": "Please enter password!" } }
zh.json文件:
{ "login": { "loginBtn": "登錄", "loginTitle": "用戶(hù)登錄", "userName": "請(qǐng)輸入用戶(hù)名", "password": "請(qǐng)輸入密碼" } }
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項(xiàng)目中使用require.context()引入某個(gè)文件夾下所有文件 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', // 設(shè)置頁(yè)面的默認(rèn)語(yǔ)言 fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'zh', messages: loadLocaleMessages() })
此外,還要在vue.config.js文件中,配置以下內(nèi)容:
pluginOptions: { i18n: { locale: 'en', fallbackLocale: 'en', localeDir: 'i18n', enableInSFC: true } },
main.js文件引入i18n
import i18n from './plugins/i18n/i18n.js' // 使用i18n實(shí)現(xiàn)國(guó)際化 console.log('i18n:', i18n) i18n.locale = 'zh' // 初始化i18n,默認(rèn)英文顯示 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、注意:語(yǔ)言包文件的數(shù)據(jù)持久化。
5、在xx.js文件中使用i18n的注意事項(xiàng):
(方法一):在main.js把Vue對(duì)象賦值給一個(gè)window上的一個(gè)對(duì)象vm
window.vm = new Vue({ el: '#app', i18n, router, store, template: '<App/>', components: { App } })
使用的時(shí)候就這樣用 :
(方法二):
存在的問(wèn)題:上面的是關(guān)于登錄表單的校驗(yàn),如第一次默認(rèn)語(yǔ)言是中文,能正確顯示校驗(yàn)提示,但是切換語(yǔ)言后,比如英文,校驗(yàn)提示還是顯示中文,并沒(méi)有同步切換回英文。
解決方案:
到此這篇關(guān)于Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案的文章就介紹到這了,更多相關(guān)Vue vue-i18n實(shí)現(xiàn)國(guó)際化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue.js國(guó)際化 vue-i18n插件的使用詳解
- vue項(xiàng)目國(guó)際化vue-i18n的安裝使用教程
- vue使用vue-i18n實(shí)現(xiàn)國(guó)際化的實(shí)現(xiàn)代碼
- vue項(xiàng)目中vue-i18n和element-ui國(guó)際化開(kāi)發(fā)實(shí)現(xiàn)過(guò)程
- vue 國(guó)際化 vue-i18n 雙語(yǔ)言 語(yǔ)言包
- 使用vue 國(guó)際化i18n 實(shí)現(xiàn)多實(shí)現(xiàn)語(yǔ)言切換功能
- vue使用i18n實(shí)現(xiàn)國(guó)際化的方法詳解
- vue項(xiàng)目實(shí)現(xiàn)國(guó)際化的基本思路與詳細(xì)步驟
相關(guān)文章
詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式
本篇文章主要介紹了詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01使用vue2.6實(shí)現(xiàn)抖音【時(shí)間輪盤(pán)】屏保效果附源碼
前段時(shí)間看抖音,有人用時(shí)間輪盤(pán)作為動(dòng)態(tài)的桌面壁紙,一時(shí)間成為全網(wǎng)最火的電腦屏保,后來(lái)小米等運(yùn)用市場(chǎng)也出現(xiàn)了【時(shí)間輪盤(pán)】,有點(diǎn)像五行八卦,感覺(jué)很好玩,于是突發(fā)奇想,自己寫(xiě)一個(gè)網(wǎng)頁(yè)版小DEMO玩玩,需要的朋友可以參考下2019-04-04在vue中使用css modules替代scroped的方法
本篇文章主要介紹了在vue中使用css modules替代scroped的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue 對(duì)axios get pust put delete封裝的實(shí)例代碼
在本篇文章里我們給各位整理的是一篇關(guān)于vue 對(duì)axios get pust put delete封裝的實(shí)例代碼內(nèi)容,有需要的朋友們可以參考下。2020-01-01基于Vue組件化的日期聯(lián)動(dòng)選擇器功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了基于Vue組件化的日期聯(lián)動(dòng)選擇器的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11