vue專案國際化vue-i18n的安裝使用教學課程-js教程-PHP中文網

vue專案國際化vue-i18n的安裝使用教學課程

亚连

發布： 2018-05-30 11:57:35

原創

2501 人瀏覽過

最近接觸學習Vue.js框架結合Element-ui元件開發專案。由於最近需要實現國際化功能，所以下面這篇文章主要介紹了vue專案國際化vue-i18n的使用的相關資料，文中透過範例程式碼介紹的非常詳細，需要的朋友可以參考下。

前言

專案需要支援多語言，我們需要提取出專案中使用的靜態文本，使用語言包進行管理，當切換語言設定的時候，可以自動切換整個項目的文字顯示。

發現Vue專案中有對應的元件 vue-i18n ，而且專案的程式碼修改不大，於是就使用了這個元件去修改專案中的程式碼。下面話不多說了，來一起看看詳細的介紹吧。

安裝

// script 引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

// npm 安装
npm install vue-i18n

// yarn 安装
yarn add vue-i18n

登入後複製

一般一個專案中使用都是透過安裝包的方式去運作的， script 引進的較少。

使用

在專案中設定i18n

import VueI18n from &#39;vue-i18n&#39;
Vue.use(VueI18n)

const i18n = new VueI18n({
  local: &#39;cn&#39;, // 设置语言 
  messages // 语言包
})

new Vue({
  el: &#39;#app&#39;,
  ...
  i18n
})

// messages 大概的使用格式
{
  cn: {
    name: &#39;名字&#39;
  },
  us: {
    name： &#39;Name&#39;
  }
}

登入後複製

使用i18n

// html 需要使用 {{}} 将 name包装起来
{{$t(&#39;name&#39;)}}

// js
$t(&#39;name&#39;)

登入後複製

#還有一些其他的用法，如：

針對不同語言，顯示不同的格式
如果在傳入自訂變數來控制顯示
##... 具體的請參考官方文檔。

切換語言的話，可以使用內建變數：

// 通过设置 locale 来切换语言
this.$i18n.locale = cn | us

登入後複製

語言包的生成& 替換專案中原有的靜態文字

這一步最關鍵，抽離出所有出現的漢字，替換成$t('xxx') ，維護多個版本的語言檔案

語言包這邊是這麼處理的，專案下方新增一個目錄languages

--languages
  --lib
    -- cn.js // 中文语言包
    -- us.js // 英文语言包
    -- .. // 其他语言，暂未实践
  -- index.js // 导出语言包

登入後複製

##cn.js

export default {
  common: {
    message: &#39;消息&#39;
  },
  xxx: {
  }
}

登入後複製

us.js

export default {
  common: {
    message: &#39;Messages&#39;
  },
  xxx: {
  }
}

登入後複製

index.js

import cn from &#39;./lib/cn.js&#39;
export default {
  cn,
  us
}

登入後複製

取代文字

<template>
  ...
  <p>{{$t(&#39;message&#39;)}}</p>
  ...
</template>

登入後複製

#上面是我整理給大家的，希望今後會對大家有幫助。

JS實作左邊列表移到到右邊列表功能

JS中用EL表達式取得上下文參數值的方法

jQuery實作文字超過1行、2行或規定的行數時自動加省略號的方法

以上是vue專案國際化vue-i18n的安裝使用教學課程的詳細內容。更多資訊請關注PHP中文網其他相關文章！