Vue3使用i18n之語系切換

本專案的前端架構為Vue3+TypeScript，首先用npm安裝如下：

npm install vue-i18n@8

在main.ts裡加上：

import i18n from './plugins/i18n'
app.use(i18n)

新增資料夾plugins並新增i18n.ts：

import { createI18n } from 'vue-i18n'
import en from '../locales/en.json'
import zh from '../locales/zh.json'
import cn from '../locales/cn.json'

type MessageSchema = typeof en

const i18n = createI18n<[MessageSchema], 'zh-TW' | 'en-US' | 'zh-CN'>({
  legacy: false, // 要把 legacy 設為 false，才可以使用 Composition API
  locale: 'en-US',
  fallbackLocale: 'en-US',
  globalInjection: true,
  messages: {
    'zh-TW': zh,
    'en-US': en,
    'zh-CN': cn
  }
})

export default i18n

再新增資料夾locales新增語系檔案例如：zh.json,en.json,json範例如下：

{
    "Language": "Language",
}

{
    "Language": "語系",
}

在主版的Vue裡加進下拉選單：

<n-select
                  v-model:value="$i18n.locale"
                  :options="localeOptions"
                  @change="changeToNewLanguege($event)"
                />

data() {
    return {
      /**
       * 語系選項
       */
      localeOptions: [
        {
          label: 'English',
          value: 'en-US'
        },
        {
          label: '繁體中文',
          value: 'zh-TW'
        },
        {
          label: '简体中文',
          value: 'zh-CN'
        }
      ],
    }
},

methods:{
    /**
     * 變更語系
     * @param param
     */
    changeToNewLanguege(param: string) {
      console.log('changeToNewLanguege param', param)
      this.$i18n.locale = param
      setCookie('Language', param)
    },
}

在每頁面上可以用如下寫法：

{{ $t('Language') }}

或是自己寫function:

/**
 * 繫結語系
 * @param {*} name
 */
export function renderLanguage(name: string) {
  const { t } = useI18n()
  return () => t(name)
}

在script裡這樣寫：

renderLanguage('Language')