Vue項目通過vue-i18n實現(xiàn)國際化方案(推薦)
Vue I18n官網(wǎng) :Vue I18n
1、安裝:
npm install vue-i18n --save
說明:直接下載最新版本的時候,出現(xiàn)了一個報錯,后來換回了低一點的版本(如:8.22.1版本),就沒出現(xiàn)把報錯了,具體的報錯如下:
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實現(xiàn)國際化 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、注意:語言包文件的數(shù)據(jù)持久化。
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實現(xiàn)國際化方案的文章就介紹到這了,更多相關Vue vue-i18n實現(xiàn)國際化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
詳解使用Vue.Js結合Jquery Ajax加載數(shù)據(jù)的兩種方式
本篇文章主要介紹了詳解使用Vue.Js結合Jquery Ajax加載數(shù)據(jù)的兩種方式,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01使用vue2.6實現(xiàn)抖音【時間輪盤】屏保效果附源碼
前段時間看抖音,有人用時間輪盤作為動態(tài)的桌面壁紙,一時間成為全網(wǎng)最火的電腦屏保,后來小米等運用市場也出現(xiàn)了【時間輪盤】,有點像五行八卦,感覺很好玩,于是突發(fā)奇想,自己寫一個網(wǎng)頁版小DEMO玩玩,需要的朋友可以參考下2019-04-04在vue中使用css modules替代scroped的方法
本篇文章主要介紹了在vue中使用css modules替代scroped的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03vue 對axios get pust put delete封裝的實例代碼
在本篇文章里我們給各位整理的是一篇關于vue 對axios get pust put delete封裝的實例代碼內容,有需要的朋友們可以參考下。2020-01-01基于Vue組件化的日期聯(lián)動選擇器功能的實現(xiàn)代碼
這篇文章主要介紹了基于Vue組件化的日期聯(lián)動選擇器的實現(xiàn)代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11