vue 國際化i18n 多語言切換

2021-09-27 12:40:47 字數 1070 閱讀 4578

安裝

npm install vue-i18n

新建乙個資料夾 i18n ,內新建 en.js zh.js index.js 三個檔案

準備翻譯資訊

en.js

export default

};

zh.js

export default

};

index.js

建立vue-i18n例項

import vue from "vue";

import vuei18n from "vue-i18n";

import enlocale from "./en";

import zhlocale from "./zh";

vue.use(vuei18n);

const i18n = new

vuei18n(,

zh:

}});

export

default i18n;

i18n 掛載到 vue 根例項

main.js

import vue from "vue";

import router from "./router";

import store from "./store";

import i18n from "./assets/i18n/index";

vue.config.productiontip = false

;vue.prototype.$i18n =i18n;

newvue(}

注意:比如說上面的hi 你要通過這種形式來寫的時候,不能放在data 裡面,因為當語言切換的時候 他是不會變的 ,要寫在computed內

如果對您有幫助請動動滑鼠右下方給我來個贊,您的支援是我最大的動力。

更多專業前端知識,請上

【猿2048】www.mk2048.com

Vue多語言切換 i18n使用

vue使用中經常設計到多語言切換。官方文件比較通俗,1小時看完就會上手,我簡單記錄下自己在使用犯蠢的錯誤。1.tc 用於複數,例如英文一般分單複數 這裡的複數,指的是同乙個字段,可能根據單複數不同可以有多個值對關係 const messages banana bananas 2.t 使用在一般場景,...

vue i18n多語言國際化

專案中需要自定義切換中 英文,基於vue.js,結合vue i18n,elementui,以下是使用方法。vue.js vue i18n國際化 先不使用elementui,就簡單的vue.js vue i18n使用方法 在main.js同級建i18n新資料夾,裡面新建i18n.js langs資料夾...

react Taro 使用i18n國際化

npm install react i18next i18next i18next browser languagedetector 新建index.jsx import languagedetector from i18next browser languagedetector import i1...