element ui國際化探索（大型專案適用）

2022-03-04 15:08:02 字數 1931 閱讀 5482

配置好了，自己感覺是比較簡單的，就是有一點點繁瑣，加油吧。

由於保密，無法拿出專案，故寫了乙個小demo,記錄一下,適用於大型專案：

專案中需要自定義切換中/英文（國際化），基於vue.js，結合vue-i18n，elementui,以下是使用方法。

vue-i18n：

安裝:npm install vue-i18n

目錄結構如下圖：

//從localstorage中拿到使用者的語言選擇，如果沒有，那預設中文。

const i18n = new vuei18n()

export default i18n

//langs/index.js


import en from './en';


import cn from './cn';


export default 



const en = 


}export default en;



const cn = 


}export default cn;



新增下面**


import i18n from './i18n/i18n';


router,


store,


i18n,


})
接下來是在頁面中使用、切換語言。

//html: 


<


p>}


p> // hello, world



//js切換語言


data() 


},methods: 


}
更改的地方不多，如下

import vue from 'vue'


import locale from 'element-ui/lib/locale';


import vuei18n from 'vue-i18n'


import messages from './langs'


vue.use(vuei18n)


//從localstorage中拿到使用者的語言選擇，如果沒有，那預設中文。


const i18n = new vuei18n()


locale.i18n((key, value) => i18n.t(key, value)) //為了實現element外掛程式的多語言切換


export default i18n
舉栗：一：}

二：:label="$t('cr.productcmo')"

三：:rules=""

四：hae.alert(this.$t('cr.pushfailed'))

五：}六：

v-text、v-html中：

data中: label: this.$t('message.hello')

:label="$t('cr.productcmo')"prop="signuser.productcmo" :rules="">


:placeholder="$t('cr.query')" @select="handleselect0" clearable>


}}}
書山有路勤為徑，學海無涯苦作舟。

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...

軟體國際化值頁面國際化

國際化 軟體的國際化 軟體開發時，要使它能同時應對世界不同地區和國家的訪問，並針對不同地區和國家的訪問，提供相應的 符合來訪者閱讀習慣的頁面或資料。國際化又稱為 i18n internationalization 對於軟體中的選單欄 導航條 錯誤提示資訊，狀態資訊等這些固定不變的文字資訊，可以把它們...

外掛程式國際化

外掛程式國際化 在我們的應用中，難免會遇到國際化的問題，eclipse rcp給我們提供了很好的方案，甚至可以在後期批處理完成，但如果是其它外掛程式未提供我們需要的語言版呢?我們可以如何為它們提供語言包呢?乙個簡單的例子，你用messagedialog開啟對話方塊時，按鈕一般時 ok，cancel,...