vue element 多語言設定

2021-08-27 23:54:12 字數 1833 閱讀 5422

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

vue-i18n:

安裝:npm install vue-i18n

先不使用elementui,就簡單的vue.js+vue-i18n使用方法:

在main.js同級建i18n新資料夾,裡面新建i18n.js、langs資料夾,langs資料夾下新建en.js、cn.js;目錄如下:

import vue from 'vue'

import vuei18n from 'vue-i18n'

import messages from './langs'

vue.use(vuei18n)

//從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: 

} // hello, world

//js切換語言

data()

},methods:

}

通過改變this.$i18n.locale的值就可以自動切換頁面的語言了,en,ja,cn...等等

更改的地方不多,如下

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

import enlocale from 'element-ui/lib/locale/lang/en'

const en = ,

...enlocale

}export default en;

import zhlocale from 'element-ui/lib/locale/lang/zh-cn'

const cn = ,

...zhlocale

}export default cn;

iOS多語言設定

1 基本設定 第一步 首先在 專案工程 ptroject info中新增需要支援的語言 如上點選 號會彈出提供的語言列表,我們選擇專案需要支援的語言就可以了 第二步 建立localizable.strings 該檔名不要隨意更改 作為多語言資源對應的詞典,儲存多語言 建立好後,接下來需要繼續做如下操...

thinkphp 3 2多語言設定

return array 配置項 配置值 lang switch on true,開啟語言包功能 lang auto detect true,自動偵測語言 開啟多語言功能後有效 default lang zh cn 預設語言 lang list zh cn,en us 允許切換的語言列表 用逗號分隔...

軟體多語言

locale是指特定於某個國家或地區的一組設定,包括字符集,數字 貨幣 時間和日期的格式等。在windows中,每個locale可以用乙個32位數字表示,記作lcid。在winnt.h中可以看到lcid的組成。它的高16位表示字元的排序方法,一般為0。在它的低16位中,低10位是primary la...