Vue3 + i18n 初始設定

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

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

 

安裝i18n

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

$ yarn add vue-i18n@next

要記得後面有個@next

 

新增檔案

我們有以下幾隻檔案需要新增:i18n.jstw.jsonen.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>

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。