成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

wangtdgoodluck / 799人閱讀

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

0. 直接上 預(yù)覽鏈接

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

1. 環(huán)境搭建

命令進(jìn)入項(xiàng)目目錄，執(zhí)行以下命令安裝vue 國際化插件vue-i18n

npm install vue-i18n --save

2. 項(xiàng)目增加國際化翻譯文件

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

lang文件獲取地址
3. 項(xiàng)目引入

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

4. 項(xiàng)目使用

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

Zh_CN.js:

EN.js:

然后在要翻譯的地方進(jìn)行翻譯。

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

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

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

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

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

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

至此整合完畢 源碼地址

Vue學(xué)習(xí)大佬群493671066，美女多多。老司機(jī)快上車，來不及解釋了。

作者相關(guān)Vue文章

基于Vue2.0實(shí)現(xiàn)后臺系統(tǒng)權(quán)限控制

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

前端文檔匯總

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

打賞 衷心的表示感謝

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107699.html

相關(guān)文章

  • vue，使用vue-i18n實(shí)現(xiàn)國際化

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

    jsummer 評論0 收藏0

  • vue-i18n和elementUI實(shí)現(xiàn)國際化

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

    _ang 評論0 收藏0

  • vue 項(xiàng)目的I18n國際化之路

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

    2i18ns 評論0 收藏0

  • 基于Vue、vue-i18n實(shí)現(xiàn)國際化（多語言）

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

    smallStone 評論0 收藏0

  • vue中使用國際化基礎(chǔ)使用

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

    Kosmos 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<