快速使用
假設你已經安裝 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