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

資訊專欄INFORMATION COLUMN

vue 項目的I18n國際化之路

2i18ns / 1585人閱讀

摘要：國內(nèi)主要主要三點，一個是港澳臺采用中文繁體英文，內(nèi)陸通俗中文簡體，新疆等地區(qū)采用文化標(biāo)準(zhǔn)。

I18n (internationalization ) ---未完善

產(chǎn)品國際化是產(chǎn)品后期維護及推廣中重要的一環(huán)，通過國際化操作使得產(chǎn)品能更好適應(yīng)不同語言和地區(qū)的需求

國際化重點：
1、 語言
語言本地化
2、 文化
顏色、習(xí)俗等
3、 書寫習(xí)慣
日期格式、時區(qū)、數(shù)字格式、書寫方向
備注：項目中會兵分兩路，一路是語言的國際化，另一路主要為文化國際化

產(chǎn)品設(shè)計之初引入國際化標(biāo)準(zhǔn)，符合項目的開發(fā)流程。
國內(nèi)主要主要三點，一個是港澳臺采用中文繁體+英文，內(nèi)陸通俗中文簡體，新疆等地區(qū)采用文化標(biāo)準(zhǔn)。

Vue-I18n
Vue-I18n安裝
CDN:

NPM:

npm install vue-i18n --save-dev

vue-I18n暴露$t對象進行應(yīng)用
項目例子（面向中國內(nèi)陸及港澳臺）

Main.js

import VueI18n from "vue-i18n"
/* 平臺國際語言靜態(tài)字典 */
import LangEn from "./lang/en"
import LangZhCHS from "./lang/zhCHS"
import LangZhCHT from "./lang/zhCHT"
/* vue-i18n注冊 */
Vue.use(VueI18n)
// 設(shè)置語言項
const i18n = new VueI18n({
  locale: "zhCHS",
  messages: {
    "en": LangEn,
    "zhCHS": LangZhCHS,
    "zhCHT": LangZhCHT
  }
})
/* eslint-disable no-new */
new Vue({
  el: "#app",
  i18n,
  components: { App },
  template: ""
})

zhCHS.js
通過exports

module.exports = {
  buttom: {
    cancel: "取消",
    determine: "確定",
    login: "登陸",
    signOut: "退出登陸",
    registered: "注冊",
    search: "查詢",
    submit: "提交",
    save: "保存"
  }
}

Example.vue
通過$t進行數(shù)據(jù)綁定
例子中初始化先檢查瀏覽器默認(rèn)語言，并保存到localstorage中
通過this.$i18n.locale可以隨意切換版本

{{$t("buttom.cancel")}}

  
    中文
    format_align_left
  
  
    English
    format_color_text
  



  watch: {
    icon (val) {
      this.$i18n.locale = val
      this.setLocalStorage("PLAY_LANG", val)
    }
  },
  created () {
    let lang = this.getLocalStorage("PLAY_LANG")
    if (lang) {
      this.icon = lang
    } else {
      let defaultLang = this.getNavigatorLang()  // 獲取瀏覽器設(shè)置語言
      this.setLocalStorage("PLAY_LANG", defaultLang)
      this.icon = defaultLang
    }
  }

效果圖：
中文

英文

完整項目github地址：https://github.com/hty7/vue-d...

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

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

相關(guān)文章

  • 如何讓一個vue項目支持多語言（vue-i18n）

    摘要：引入是一個插件，主要作用就是讓項目支持國際化多語言。所以新建一個文件夾，存放所有跟多語言相關(guān)的代碼。目前包含三個文件。全局搜索發(fā)現(xiàn)一共有多個。 這兩天手頭的一個任務(wù)是給一個五六年的老項目添加多語言。這個項目龐大且復(fù)雜，早期是用jQuery實現(xiàn)的，兩年前引入Vue并逐漸用組件替換了之前的Mustache風(fēng)格模板。要添加多語言，不可避免存在很多文本替換的工作，這么龐雜的一個項目，怎么才能使...

    wuyumin 評論0 收藏0

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

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

    _ang 評論0 收藏0

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

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

    Kosmos 評論0 收藏0

  • vue 國際化i18n 多語言切換

    摘要：如果對您有幫助請動動鼠標(biāo)右下方給我來個贊，您的支持是我最大的動力。安裝 npm install vue-i18n 新建一個文件夾 i18n ，內(nèi)新建 en.js zh.js index.js 三個文件 準(zhǔn)備翻譯信息 en.js export default { home: { helloworld: hello workd ！ } }; zh.js export d...

    tuomao 評論0 收藏0

  • vue-i18n結(jié)合Element-ui的配置

    摘要：官網(wǎng)已經(jīng)做了詳細(xì)介紹，這里依葫蘆畫瓢跟著實現(xiàn)一下為了實現(xiàn)插件的多語言切換按照如上把國際化文件都整合到一起，避免中大段引入相關(guān)代碼。 使用方法： 在配合 Element-UI 一起使用時，會有2個問題： ####（1）、頁面刷新后，通過按鈕切換的語言還原成了最初的語言，無法保存 ####（2）、框架內(nèi)部自帶的提示文字無法更改，比如像時間選擇框內(nèi)部中的提示文字 關(guān)于第一個問題，可以在初始化...

    孫淑建 評論0 收藏0

發(fā)表評論

0條評論

2i18ns

男|高級講師

TA的文章

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