1、下載il8n外掛，目前通過npm install vue-il8n下載的il8n版本是無法支援vue3.0，因此要使用npm install vue-i18n@next 來獲取最新的版本，我這邊是的版本是9.1.6

npm install vue-i18n@next  
或
yarn add vue-i18n@next

2、在src下面建立一個名為language的檔名，並在檔案下面建立zh、enjs檔案（中文、英文），本文只做中英文切換作為案例，後續可加更多版本

3、然後在四個js檔案中寫入對應的方法，這裡面存放的是我們要進行切換的語言，以下是我在名為zh.js檔案寫的中文語言，同樣的方法在其他檔案中依次寫入

export default {
  message: {
    Home: '首頁',
    About: '關於我們',
    productService: '產品服務',
    cases: '行業解決方案',
    news: '新聞動態',
    contactUs: '聯絡我們',
  },
}

4、在language檔案下面在建立一個index.js檔案

import en from './en'
import ch from './zh'

export default {
  en,
  ch,
}

5、建立一個i18n.js檔案

import { createI18n } from 'vue-i18n' //
 
引入vue-i18n元件
import messages from './index'
const language = (
  (navigator.language ? navigator.language : navigator.userLanguage) || "zh"
).toLowerCase();
const i18n = createI18n({
  fallbackLocale: 'ch',
  globalInjection:true,
  legacy: false, // you must specify 'legacy: false' option
  locale: language.split("-")[0] || "zh",
  messages,
});

export 
 
default i18n

注意上方標紅程式碼，如果不設定為true掛載到全域性的話，

6、在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './language/i18n'
createApp(App)
  .use(router)
  .use(i18n)
  .mount('#app')

這時候就已經可以在頁面中使用國際化了。

    <router-link
      v-for="(item,key) in $router.options.routes"
      :to="item.path"
      :key="key"
    >
    {{$t(`message.${item.name}`)}}
    </router-link>