MUKI AI Summary
安裝 Vue-i18n 支援 Vue3，需使用 V9 版本。首先在專案中安裝 vue-i18n@9，然後在 src/ 目錄下新增 plugins/i18n.ts，設定語系資料。將 Vue-i18n 拆成獨立檔案，或直接在 main.ts 設定。接著在 main.ts 引入並使用 i18n。
在 src/ 目錄下新增 languages/ 資料夾，創建 zh-TW.json 和 en-US.json 檔案。使用 $t 函數進行語系切換，並在 HelloWorld.vue 中範例展示如何切換語言。執行 npm run dev 查看效果。
在外部檔案如 .ts 中使用 i18n，需引入 i18n 檔案，使用 t 函數調用語系檔案。Vue-i18n 提供 TypeScript 文件供參考。...
這篇文章是延續前篇 用 Vue3 + Vite + TypeScript + TailwindCSS + ESLint 新增專案 的應用。實際開新專案後，發現自己還想安裝一些工具，先列出預計想要再安裝的東西：
- Vue-i18n (本篇)
- SASS + CSS Module
- 亮色與暗色主題
如果有安裝，都會用部落格作記錄，大家有興趣可以再點選閱讀。
安裝 Vue-i18n
我們要安裝的是支援 Vue3 的 i18n，目前官方版本是 V9，官方也把 Vue2 和 Vue3 的網站區分開來，關於 Vue3 的文件介紹請至：https://vue-i18n.intlify.dev/
▼ 安裝 Vue-i18n For Vue3
$ npm install vue-i18n@9
▼ 在 src/ 目錄底下，新增 plugins/i18n.ts，並設定語系。
現在習慣將引入的工具拆成獨立的檔案做管理，所以我將 Vue-i18n 獨自拆成一個檔案 i18n.ts。假設不習慣拆檔案的朋友，也可以直接在 main.ts 設定即可
import { createI18n } from 'vue-i18n'
import zh from '../languages/zh-TW.json'
import en from '../languages/en-US.json'
type MessageSchema = typeof zh
const i18n = createI18n<[MessageSchema], 'zh-TW' | 'en-US'>({
legacy: false, // 要把 legacy 設為 false，才可以使用 Composition API
locale: 'zh-TW',
fallbackLocale: 'zh-TW',
globalInjection: true,
messages: {
'zh-TW': zh,
'en-US': en
}
})
export default i18n
You can set
https://vue-i18n.intlify.dev/guide/advanced/composition.html#basic-usagelegacy: falseto allow Vue I18n to switch the API mode, from Legacy API mode to Composition API mode.
▼ 在 main.ts 引入 Vue-i18n
import i18n from './plugins/i18n' // 新增這一行
createApp(App).use(i18n).mount('#app') // 修改這一行，多了 .use(i18n)
▼ 在 src/ 目錄下新增 languages/ 資料夾，並新增 zh-TW.json 以及 en-US.json 兩個檔案
// zh-TW.json
{
"edit": "編輯",
"__text-test-HMR__": "以測試 HMR 功能"
}
// en-US.json
{
"edit": "Edit",
"__text-test-HMR__": "to test HMR"
}使用 Vue-i18n
▼ 因為我們在 i18n.ts 有設定 globalInjection 為 true (全域使用)，所以不需額外載入就能使用 $t 語系檔
<template>
{{ $t('edit') }}
</template>▼ 如果要切換語言，這邊以 HelloWorld.vue 做範例，將原本的英文字「Edit components/HelloWorld.vue to test HMR」改成中英語系切換
<template>
<div class="card">
<div>
切換語言：
<select @change="handleChangeLanguage">
<option value="zh-TW">中文</option>
<option value="en-US">English</option>
</select>
</div>
<p>
{{ $t('edit') }} <code>components/HelloWorld.vue</code> {{ $t('__text-test-HMR__') }}
</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const handleChangeLanguage = (e) => {
locale.value = e.target.value
}
</script>
切換語系
接著 npm run dev 你的專案，就可以看到切換中英語系的效果囉。
在外部檔案(如 .ts) 使用 i18n
有時候，我們可能想在 Vue Component 以外的地方使用 i18n，例如一隻 typescript 或 javascript 檔案，這時候我們可以這樣寫：
import { i18n } from './plugins/i18n' // 一樣先引入 plugins 底下的 i18n 檔案
const { t } = i18n.global
// 使用方式
export const fetch = () => {
const date = t('text.date') // 使用 t('') 調用 i18n 檔案
}官方的 TypeScript 文件
Vue-i18n 也有 TypeScript 的文件可參考：
TypeScript Support | Vue I18n
Internationalization plugin for Vue.js
https://vue-i18n.intlify.dev/guide/advanced/typescript.html
21
想詢問如果要再切換語言之後，調整網址 /en /zh-tw 的話
vue router 方面要怎麼下手會比較好
你们加上ts之后 编译器会提示内容么
怎樣的提示內容呢？？