Vue3 + i18n 初始設定

我在 vue2 已經有用過 i18n 了，怎麼搬到 vue3 就出現各種錯誤呢？

Vue3 因為 Composition API 的緣故，在引入套件上面有改一些寫法，直接從 vue2 直接搬過來是會有問題的，那就從頭開始安裝起吧！

 

安裝i18n

以下步驟都可以從官網找到，懶得閱讀官網就繼續往下看吧！

$ yarn add vue-i18n@next

要記得後面有個@next

 

新增檔案

我們有以下幾隻檔案需要新增：i18n.js、tw.json、en.json

-- src/
   └ plugins/
     └ i18n.js
   └ lang/
     └ tw.json
     └ en.json

 

i18n.js

import { createI18n } from "vue-i18n";
import tw from "@/lang/tw";
import en from "@/lang/en";
export const i18n = createI18n({
  locale: "tw",  // 初始的語言，之後可以實作把他按照情境替換成en
  messages: {
    tw,
    en,
  },
});

 

語言json檔

大概會長得像下面這樣子：

{
  "amount": "轉出數字",
  "change_pw": "置換密碼",
  "close": "關閉",
  "confirm": "確認",
  "list": "轉帳明細",
  "login": "登入",
  "logout": "登出",
  "new_password": "新密碼",
  "password": "密碼",
  "retry_password": "確認密碼",
  "transfer": "轉帳",
  "user_keep": "保留登出",
  "username": "帳號"
}

 

在Main.js中引用

import { i18n } from "@/plugins/i18n";
//...

app.use(i18n);

 

在頁面中使用

<template>
  <p>{{ $t('login') }}</p>
</template>