title: '前端開發系列055-基礎篇之Vue專案實現多語言支援'
tags:
  - 前端開發
categories: []
date: 2018-01-15 20:58:37

外掛介紹

介紹：Vuei18n 是 Vue.js 的國際化外掛。它可以輕鬆地將一些本地化功能整合到你的 Vue.js 應用程式中。

安裝：npm install vue-i18n 或者 yarn add vue-i18n

專案使用

在專案目錄下面建立一個資料夾(隨便叫啥名都行)，這個資料夾主要用於處理i18n模組，做兩件事情。

第一件事情是需要根據vue-i18n模組來匯出一個i18n的例項物件，以供專案中能夠直接使用。
第二件事情是需要提供具體的多語言支援檔案，比如支援中文、中文繁體和英文，那麼就需要提供特定欄位的三種語言版本，以供按實際語言來進行顯示。下面給出檔案目錄結構。

//index.ts檔案中的程式碼示例：
//引入模組
import { createI18n } from 'vue-i18n';
//引入語言包(模組)
import zh from './zh';
import en from './en';
import tw from './tw';

//獲取當前環境的語言
let language = navigator.language;
console.log('日誌：language = ', language);

//如果當前環境語言非'zh-TW', 'en-US', 'zh-CN' 則預設選擇中文
if (!['zh-TW', 'en-US', 'zh-CN'].includes(language)) {
  language = 'zh-CN';
}

console.log('日誌：多語言處理，當前語言環境為 = ', language);
// 建立i18n例項物件
const i18n = createI18n({
  locale: language,     // 設定語言
  messages: {           // 設定語言包
    'zh-CN': zh,
    'en-US': en,
    'zh-TW': tw
  }
});

export default i18n;
 

語言包其實就是就是需要多語言處理的字典，比如 我們有一個按鈕，在不同的語言環境中需要分別被處理為：close、關閉、關閉，只需要在不同的語言包中寫好對應的字典並在模組中返回，下面給出簡單的對應關係。

//tw.ts檔案內容
const tw = {
  message: {
    close: '關閉',
    search: '搜尋',
    noFiles: '暫無檔案'
  }
};

export default tw;


//zh.ts檔案內容
const zh = {
  message: {
    close: '關閉',
    search: '搜尋',
    noFiles: '暫無檔案'
  }
};

export default zh;

//en.ts檔案內容
const en = {
  message: {
    close: 'Close',
    search: 'Search',
    noFiles: 'No files'
  }
};

export default en;

 

使用場景

專案中大概有兩種場景，一種是在DOM節點中，一種是在JS的程式碼中。
如果是DOM節點中使用，那麼可以直接通過$t('message.xxx')的方式來使用。

<!-- 01 節點的內容 -->
<div class="text">{{ $t('message.noFiles') }}</div>

<!-- 02 節點的屬性 -->
 <InsertPanel :action="action === 'save' ? $t('message.save') : $t('message.insert')"/>    

如果是在JS中使用，那麼可以通過之前在src/i18n/index.ts中匯出的例項物件來獲取。

// 先匯入模組
import i18n from '../i18n';

// 獲取欄位
let close =  i18n.global.t('message.close');

引數處理

在處理字典的時候，可能有的字典中存在一些變數，比如我在Vue的節點中需要顯示的內容為：當前選擇20項，在進行多語言處理前，大概寫法如下：

<div> 當前選擇 {{  count }} 項 </div>

如果我們在語言包(以zh為例)中對應的欄位為: selectCout，那麼可以寫成下面格式

//zh.ts 檔案語言包程式碼示例
const zh = {
  message: {
    itemSelected: '當前選擇{count}項'
  }
};
export default zh;

//使用頁面的程式碼示例，其中count為全域性可以訪問的變數
<div> {{ $t('message.itemSelected',count:selectCount)}} </div>