Vue多語言實戰

前言

最近在作一個香港的項目，須要項目支持簡體中文、繁體中文和英文。經調研後，使用Vue生態中比較成熟的是vue-i18n。項目實戰時，本身也積累了些有用的經驗，寫出來和你們分享。

基本使用

這裏默認各位看官使用Vue-cli搭建前端工程。

1.安裝：

npm i vue-i18n --save
複製代碼

2.在src目錄下建立i18n目錄，放置多語言相關代碼

3.在i18n目錄建立locale，放置語言包

語言包通常使用json形式存儲，咱們建立簡體中文、繁體中文和英文三個語言包：

zh-CN.json

{
    "message": "你好，中國",
    "pleaseEnter": "請輸入內容",
    "apple": "蘋果",
    "banana": "香蕉"
}
複製代碼

zh-HK.json

{
    "message": "你好，中國",
    "pleaseEnter": "請輸入內容",
    "apple": "蘋果",
    "banana": "香蕉"
}
複製代碼

en.json

{
    "message": "hello, china",
    "pleaseEnter": "please enter content",
    "apple": "apple",
    "banana": "banana"
}
複製代碼

4.在i18n目錄下建立index.js，建立i18n實例：

import Vue from 'vue';
import VueI18n from 'vue-i18n';

// 導入語言包信息
import en from "./locale/en.json";
import zhCN from "./locale/zh-CN.json";
import zhTW from "./locale/zh-TW.json";

// 註冊i18n
Vue.use(VueI18n);

// 語言包根據語言環境分類
const messages = {
    en,
    "zh-CN": zhCN,
    "zh-TW": zhTW,
}

// 經過選項建立 VueI18n 實例並導出
export default new VueI18n({
    locale: 'zh-CN', // 設置當前語言環境，默認中文簡體
    messages, // 設置語言環境對應信息
})
複製代碼

5.註冊i18n到Vue實例中

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './i18n';// 引入i18n實例

new Vue({
  router,
  store,
  i18n, // 掛載到根實例中
  render: h => h(App)
}).$mount('#app')
複製代碼

6.在組件中使用

頁面或組件中，通常使用多語言比較多的三種狀況：

• html標籤裏的渲染內容
• html標籤上的屬性
• 組件中的多語言數據

其實這三種狀況都依賴於i18n掛載後的全局$t方法。

這裏在App.vue中展現一下寫法：

<template>
  <div id="app">
    <!-- 切換語言 -->
    <label for>選擇語言：</label>
    <select v-model="locale">
      <option
        v-for="(locale, index) in locales"
        :key="index"
        :value="locale.value"
      >{{ locale.label }}</option>
    </select>
    <!-- 渲染內容 -->
    <h1>{{ $t('message') }}</h1>
    <!-- 標籤屬性 -->
    <input type="text" :placeholder="$t('pleaseEnter')" />
    <!-- 計算屬性列表渲染 -->
    <ul>
      <li v-for="(fruit, index) in fruits" :key="index">{{ fruit.label }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      locale: this.$i18n.locale, //使用i18n實例默認定義的語言
      locales: [
        {
          value: "en",
          label: "英文"
        },
        {
          value: "zh-CN",
          label: "中文簡體"
        },
        {
          value: "zh-TW",
          label: "中文繁體"
        }
      ]
    };
  },
  watch: {
    locale(val) {
      this.$i18n.locale = val;
    }
  },
  computed: {
    fruits() {
      return [
        {
          value: 1,
          label: this.$t("apple") // 列表中的數據支持多語言
        },
        {
          value: 2,
          label: this.$t("banana")
        }
      ];
    }
  },
  mounted() {
    console.log(this.$t());
  }
};
</script>
複製代碼

7.運行，獲得下面的頁面交互：

可讀性

經過看上面的代碼，咱們會發現多語言寫的代碼可讀性不好，當頁面都是用多語言，看到項目都是相似於$t("message")這種寫法，簡直就是噩夢。

那麼怎麼能夠加強可讀性呢？其實已經有大佬在前面踩坑了，經過IDE插件來解決！！

這裏推薦VSCode的Vue i18n Ally，使用三步走：

• 搜索Vue i18n Ally並安裝；
• 安裝完後，應該會自動檢測到你的項目多語言目錄；
• 配置一下代碼提示改成簡體中文：快捷鍵ctrl+shift+p，頂部彈出搜索框輸入Vue i18n ally: Change display language，選擇zh-CN。

ok，而後IDE就會幫你的代碼加強可讀性，看圖：

樣式

設計稿給咱們通常是以簡體中文來寫樣式的，但因爲英文和中文長度不一致，會致使樣式錯亂問題，因此須要要求設計一開始要留意這個點。通常有兩種方案：

1. 設計稿兩套UI、前端兩套樣式；
2. 設定稿設計時兼容兩種狀況，位置留足給英文（英文通常比中文長）。

參考

vue-i18n官網

詳細代碼

github.com/SimonPower/…

最後

若是文章有什麼說得不對的地方，歡迎評論指出；而若是文章對你有幫助的話，幫忙點個贊吧