vue中使用vue i18n簡單實現國際化

新建vue專案

首先，新建乙個vue專案，並成功執行

vue init webpack 『專案名』

目錄結構

目錄結構如下，en.js和zh.js分別是英文和中文的文字資訊。

main.js檔案的配置，在main.js中新增以下跟vue-i18n的使用有關的配置項。

// en.js

const en =
}export
default en

// zh.js

const zh =
}export
default zh

// index.js

import en from
'./en'
import zh from
'./zh'
export
default

// i18n.js

import vue from
'vue'
import vuei18n from
'vue-i18n'
import messages from
'./langs/index'
vue.
use(vuei18n)
/** * 從localstorage中拿到使用者的語言選擇，如果沒有，那麼預設為中文
*/const i18n =
newvuei18n()
export
default i18n

// main.js

...import i18n from
'./locale/i18n/i18n'
...new
vue(
)

頁面中如何使用。

="hello"

>
}<
/h1>
}<
/h2>
"changelanguage('zh')"
>中文<
/button>
"changelanguage('en')"
>english<
/button>
"open"
>彈出框<
/button>
<
/div>
... methods:
else
localstorage.
setitem
('lang'
, lang)
// 存到localstorage中},
open()
}實現效果如圖

vue多語言外掛程式vue i18n

安裝vue i18nnpm install vue i18n s 使用 1.在main.js中引入vue i18nimport vuei18n from vue i18n vue.use vuei18n 2.vue i18n初始化const i18n newvuei18n 3.vue i18n掛載到...

vue國際化 vue i18n的配置

npm i s element ui vue i18n js cookie 複製 zh.js export default login header footer en.js export default header footer login 複製 import vuei18n from vue ...

vue專案支援多語言 vue i18n

vue i18n 是乙個vue外掛程式，主要作用就是讓專案支援國際化多語言。首先我們引入這個外掛程式 import vue from vue import vue18n from vue i18n vue.use vuei18n vue外掛程式的使用方法，通過全域性方法vue.use 使用外掛程式。...