欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案(推薦)

 更新時(shí)間:2022年12月12日 14:58:39   作者:苪玫兒呀  
這篇文章主要介紹了Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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ó)際化 | vue-element-admin

到此這篇關(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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vant-Dialog 彈出框的使用小結(jié)

    vant-Dialog 彈出框的使用小結(jié)

    這篇文章主要介紹了vant-Dialog 彈出框的使用小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • 基于Vue實(shí)現(xiàn)拖拽效果

    基于Vue實(shí)現(xiàn)拖拽效果

    這篇文章主要介紹了基于Vue實(shí)現(xiàn)拖拽效果,文中給大家介紹了clientY pageY screenY layerY offsetY的區(qū)別講解,需要的朋友可以參考下
    2018-04-04
  • vite的搭建與使用的詳細(xì)步驟

    vite的搭建與使用的詳細(xì)步驟

    本文主要介紹了vite的搭建與使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • vuex的幾個(gè)屬性及其使用傳參方式

    vuex的幾個(gè)屬性及其使用傳參方式

    這篇文章主要介紹了vuex的幾個(gè)屬性及其使用傳參,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-01-01
  • 詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式

    詳解使用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)】屏保效果附源碼

    使用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組件層級(jí)關(guān)系詳細(xì)分析

    Vue組件層級(jí)關(guān)系詳細(xì)分析

    這篇文章主要介紹了Vue組件的層級(jí)關(guān)系,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • 在vue中使用css modules替代scroped的方法

    在vue中使用css modules替代scroped的方法

    本篇文章主要介紹了在vue中使用css modules替代scroped的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-03
  • vue 對(duì)axios get pust put delete封裝的實(shí)例代碼

    vue 對(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)代碼

    這篇文章主要介紹了基于Vue組件化的日期聯(lián)動(dòng)選擇器的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-11-11

最新評(píng)論