Vue國際化處理 vue-i18n 以及項目自動切換中英文

wangtdgoodluck 發布于2019-08-26 11:51 / 795人閱讀

摘要：直接上預覽鏈接國際化處理以及項目自動切換中英文環境搭建命令進入項目目錄，執行以下命令安裝國際化插件項目增加國際化翻譯文件在項目的下添加文件夾增加中文翻譯文件以及英文翻譯文件，里面分別存儲項目中需要翻譯的信息。

0. 直接上預覽鏈接

1. 環境搭建

命令進入項目目錄，執行以下命令安裝vue 國際化插件vue-i18n

npm install vue-i18n --save

2. 項目增加國際化翻譯文件

在項目的src下添加lang文件夾增加中文翻譯文件（zh_CN.js）以及英文翻譯文件（EN.js），里面分別存儲項目中需要翻譯的信息。

lang文件獲取地址

3. 項目引入

在項目的main.js中引入vue-i18n插件，引入對應的翻譯文件（zh_CN.js/EN.js）引入并結合Element-UI 國際化。
入下圖

4. 項目使用

在中文翻譯文件zh_CN中引入Element-UI的中文腳本，在英文翻譯文件EN中引入Element-UI的英文腳本，并且在文件中加入要翻譯的內容，具體如下：

Zh_CN.js:

EN.js:

然后在要翻譯的地方進行翻譯。

如果是element-ui 的，在要翻譯的前面加上冒號

比如：label=“用戶姓名” 就改成 :label=”$t(‘order.userName’)”

如果是html 顯示的，就改用以下寫法：

直接寫成 {{$t(‘order.userName’)}},就會直接去往翻譯腳本里面自動匹配。

選擇語言之后把記錄存在cookie里面。

再次打開瀏覽器訪問項目初始化的時候從cookie里面得到之前選擇的語言。

至此整合完畢源碼地址

Vue學習大佬群493671066，美女多多。老司機快上車，來不及解釋了。

作者相關Vue文章

基于Vue2.0實現后臺系統權限控制

[vue2.0-基于elementui換膚[自定義主題]](https://blog.csdn.net/qq_3234...

前端文檔匯總

VUE2.0增刪改查附編輯添加model(彈框)組件共用

打賞衷心的表示感謝

GPU云服務器云服務器 vue-i18n js網頁中英文切換云服務器搭建vue項目自動定時切換

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107699.html

vue，使用vue-i18n實現國際化

摘要：需求公司項目需要國際化，點擊按鈕切換中文英文安裝注入實例中，項目中實現調用和模板語法語言標識通過切換的值來實現語言切換中文語言包英文語言包最后對應語言包中文語言包首頁概覽公司概述財務報表更多附錄主要財務指標對比分析新聞事件檔案需求公司項目需要國際化，點擊按鈕切換中文/英文 1、安裝 npm install vue-i18n --save 2、注入 vue 實例中，項目中實現調用 ...

jsummer 2019-08-22 16:05 評論0 收藏0
vue-i18n和elementUI實現國際化

摘要：為了滿足很多公司都已經向方向發展顧使用多語言的網站已經太普遍了所以是使用和實現國際化接下來我會盡量寫的詳細一點的內容個人覺得的應該寫得清楚一些安裝所需要用到的東西安裝安裝創建目錄編寫所需要用到的語言我只寫了中文和英文歡迎來到我為了滿足很多公司都已經向international方向發展,顧使用多語言的網站已經太普遍了, 所以是使用vue-i18n和elementUI實現國際化.接下來我...

_ang 2019-08-22 18:14 評論0 收藏0
vue 項目的I18n國際化之路

摘要：國內主要主要三點，一個是港澳臺采用中文繁體英文，內陸通俗中文簡體，新疆等地區采用文化標準。 I18n (internationalization ) ---未完善產品國際化是產品后期維護及推廣中重要的一環，通過國際化操作使得產品能更好適應不同語言和地區的需求國際化重點：1、語言語言本地化2、文化顏色、習俗等3、書寫習慣日期格式、時區、數字格式、書寫方向備...

2i18ns 2019-08-22 16:06 評論0 收藏0
基于Vue、vue-i18n實現國際化（多語言）

摘要：在中引入調用第三方插件新建一個對象默認語言配置語言選項是一個配置語言包文件和語言選項的文件，文件內容大致如下語言包列表合并語言包是一個函數，判斷當前設置的語言類型，如果沒有設置語言，則根據判斷是中文還是非中文，非中文則顯示英語。 vue-i18n官網 https://kazupon.github.io/vue... 項目用vue-cli構建，用到vue全家桶及webpack、iview...

smallStone 2019-08-23 14:30 評論0 收藏0
vue中使用國際化基礎使用

摘要：方式使用引入要在之后引入使用你好當前語言重新設置中文英文其他當前語言切換語言效果項目中使用安裝使用入口文件增加以下代碼可以創建文件夾，拆分國際化文件最后引入國際化保存對象你好引用模板當前語言切換語言當前語言重新設置中文英文其他效 cdn方式使用 1.引入 vue-i18n要在vue之后引入 2.使用 js const messages = { zh_CN: { ...

Kosmos 2019-08-26 10:37 評論0 收藏0