vue國際化 一

2022-07-25 09:42:07 字數 2245 閱讀 7260

專案基於vue+typescript+iview,有國際化的需求,目前支援中文和英文兩種語言。

本身國際化沒有什麼難度,但是typescript和iview還是有點需要注意的,特此記錄。

vue i18n 是 vue.js 的國際化外掛程式。它可以輕鬆地將一些本地化功能整合到你的 vue.js 應用程式中。
基本的使用方法就不多介紹了,參考下列文件。後面介紹一些遇到的問題及解決辦法。

}

呼叫$t方法,引數傳key值。至於m.common.name的key從何而來,我們看一下i18n傳入的的messages值。

先看main.js裡,message傳入兩種語言的字串物件。

const messages = 

const i18n = new vuei18n()

其中zh-cn的值:

m = 

}

en-us的值:

m = 

}

到這裡,明白了m.common.namekey怎麼來的了吧!

js**中的使用方法是呼叫$i18n.t方法

data () 

}

需要注意的是,與html中不同,當i18n的locale切換時,html中用到的字串會重新渲染,完成語言的切換,而js**中的字串無法實現。

網上有乙個方案是將字串獲取放在computed中,或者是watch監聽locale的變化,完成翻譯的轉換。

我這裡,採用的是切換locale時,先將locale存在cookie中,然後重新整理頁面,完成國際化。

// 頁面重新整理

location.reload();

雖然這種辦法存在問題(無法保持當前頁面的狀態),但是卻能解決iview元件的國際化。

在ts**中使用i18n的話,會報錯:

"typeerror: cannot read property 't' of undefined"

所以需要將用到i18n的放在@component中,如下:

@component(

}})export default class resourcepoolpage extends vue

但是如果data中不是單純的屬性,而是複雜的物件,甚至會引用到methods中的方法時,你甚至需要把data和methods都挪至@component裡,那麼就失去ts的優勢了。下面的方法可以解決這個問題:

首先main.ts裡,改寫,將vue物件存在window。

window['vm'] = new vue(

如果嫌麻煩,可以封裝乙個翻譯的方法,在ts裡呼叫即可。

iview的國際化分為iview自身的國際化,以及iview接收到資料的國際化(如table中的columns的國際化)。

4.1 iview自身國際化

main.ts裡完成:

const lang = vuexstore.getters.getlang // 獲取當前的lang

const locale = (lang === 'zh-cn') ? localecn : localeen

vue.use(iview, )

4.2 資料的國際化

資料的國際化沒有特別的操作,依照前面的js和ts方法,只需要乙個頁面重新整理操作即可。具體流程如下:

main.ts初始會讀cookie裡的值,獲取lang的設定,沒有的話預設是中文。

lang修改後,儲存cookie,然後location.reload(),重新整理頁面。  

參考:

Vue 語言國際化

1 安裝外掛程式 npm install vue i18n 中英文2 建立i18n例項src i18n index.jsimport vuei18n from vue i18n import vue from vue vue.use vuei18n const i18n new vuei18n ex...

vue實現國際化

這裡為了簡單,將所有的東西都寫到main.js,在實際的應用中需要將這些拆分到不同元件中。1.1 安裝vue的國際化支援npm install vue i18n當然如果你沒有沒事使用包管理工具,那麼你可以直接這樣使用 src script 1.2 配置使用 這裡我們使用包管理工具的方式配置,我們直接...

Vue中的國際化

單純記錄使用過程中遇到的問題,基礎的用法看官網的就行了官網位址 1.script標籤裡面使用國際化,例如在methods裡面使用 methods 在html標籤屬性中使用,例如在placeholder中使用 type lock lock password text placeholder t log...