如何在Vue Element專案中配置國際化

2021-10-13 21:29:03 字數 1403 閱讀 7888

vue i18n

1 建立i18n資料夾

在專案根目錄,即src目錄項建立i18n目錄,此目錄下用於存放多語言的翻譯如zh.js儲存中文翻譯,en.js儲存英文翻譯,id.js 儲存印尼語等。

// en.js

export

default

}

// zh.js

export

default

}

2 建立preset資料夾

在專案根目錄,即src目錄下面建立preset目錄,此目錄下用於存放外掛程式配置項預設,例如i18n.ts,router.ts,store.ts。

這裡的i18n.ts 主要是為了引入 vue-i18n且建立i18n例項。

import vue from

"vue"

;import vuei18n from

"vue-i18n"

;import enlocale from

"../i18n/en"

;import zhlocale from

"../i18n/zh"

;vue.

use(vuei18n)

;// lang 可以根據專案頭上的切換語言元件選擇的語言來決定

const locale = process.env.lang ||

"zh_cn"

;const messages =

;const i18n =

newvuei18n()

;// 專案中有些地方請求資料可能用到

localstorage.

setitem

("locale"

, locale)

;export

default i18n;

最後在vue 入口檔案main.js中在 vue建立例項的時候掛載i18n

import vue from

"vue";;

import i18n from

"./preset/i18n"

;//部分其他省略

//....

newvue()

;

在元件中如下使用

="hello"

>

}<

/div>

<

/template>

export

default;}

};<

/script>效果圖如下

vue element搭建專案

前言 使用到的技術和框架及平台外掛程式 git vue vuex element js cookies 步驟 1 配置開發環境 node.js npm v 檢視node版本 vue v 檢視vue版本 vue vue cli 全域性安裝vue vue腳手架 2 新建資料夾,在檔案下初始化專案 vue...

Vue Element專案實戰系列 動態麵包屑

麵包屑應該是我們在專案中經常使用的乙個功能,一般情況下它用來表示我們當前所處的站點位置,也可以幫助我們能夠更快的回到上個層級。今天我們就來聊聊如何在 vue 的專案中實現麵包屑功能。以下案例都是使用 element ui 進行實現。首先我們想到的最笨的方法就是在每個需要麵包屑的頁面中固定寫好。如果按...

vue element專案做員工排班表

ps 獲取當前時間的常用格式 var today new date var stryear today.getfullyear var strday today.getdate var strmonth today.getmonth 1 var strdate today.getday var no...