[Vue.js] vue-i18n 實現多語系

快速使用

假設你已經安裝 Vue cli 3.x，你可以直接到專案裡執行：

vue add i18n

接著會詢問你預設的語言、備用語系(fallbackLocale)及字典檔的目錄，所謂的備用語系指的是當使用者選擇語言的字典檔有缺時，會採用哪個語言的資料替代。

若按照預設值執行的話，可以確認一下專案是否出現目錄 /[Your Project]/src/locales/ ，裡面有個 en.json 英文的字典檔。

這個方法相關的設定已經自動完成，可以直接在 template 上使用：

{{ $t('message') }}

安裝及設定

Step 1: 安裝套件

npm install vue-i18n

Step 2: 新建目錄及字典檔

mkdir locales

新增目錄 /[Your Project]/src/locales/ ，加入第一個字典檔 en.json 。

{
  "hello": "Hello!"
}

接著 index.js

import en from './en';

export const messages = {
    en,
};

你也可以在 locales/ 下繼續新增其他語系

Step 3: 設定

新增 i18n.js 設定 locale 預設語言及 fallbackLocale 備用語言等，messages 是所有語系的字典檔。

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import {messages} from './locales';

Vue.use(VueI18n);

export default new VueI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en',
  messages, // set locale messages
});

將設定加入 main.js

import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n'

Vue.config.productionTip = false

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

試著在 template 上使用：

{{ $t('hello') }}

上述的檔案完成後，專案的架構如下列所示：

./src/
├── App.vue
├── i18n.js
├── locales
│   ├── en.json
│   └── index.js
└── main.js

更多的安裝資訊可以參考[文件]

進階使用

切換語系

在 root 更改設定值

$i18n.locale

備用語系

可依據各語言設定，可接受傳入字串、陣列、物件等

fallbackLocale