[重构倒数第19天] - i18n什麽的交给前端来处理吧(二) Vue3 载入Vue-i18n

前言

该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系列文章，在这边整理了许多我自己使用Vue重构很多网站的经验分享给读者们。

在前一篇我们已经说到我们可以透过 Nodejs 来抓取 google sheet 里面的内容来转换我们前端要做多国语系所需要用到的 JSON 档案，这次我们要在Vue的专案里面来使用翻译的 JSON 档案。

还没看过的走这边 : https://ithelp.ithome.com.tw/articles/10262354

首先我们会需要用到 vue-i18n 这个套件来帮助我们把网站变成多国语系，帮我npm安装它

npm install vue-i18n@next -S

这边要特别注意，如果你在网路上面搜寻 vue-i18n 可能会搜寻到 v8 的版本，那没有支援 vue3，所以我们安装的vue-i18n@next 是 v9 的版本，是给 Vue3 使用的，不过我在写这篇文章的时候 v9 目前处於 v9.2.0-beta.2的状态，所以之後安装的时候要稍微注意一下喔，安装好了之後可以把我们处理过的翻译档案连同 language 资料夹一起搬到专案里面。

其实可以把写好的 GoogleSheetToJson.js 这个档案一起搬入专案里面，开一个 script 的资料夹来放。

然後在我们的 main.js 来引入 vue-i18n，像是下面这样。

import { createApp } from "vue";
import { createI18n } from "vue-i18n";
import App from "./App.vue";
import zh from "./language/zh-TW.json";
import en from "./language/en-US.json";
import ja from "./language/ja-JP.json";
const i18n = createI18n({
  legacy: false,
  locale: "zh-TW",
  fallbackLocale: "zh-TW",
  messages: {
    "zh-TW": zh,
    "en-US": en,
    "ja-JP": ja
  }
});
createApp(App).use(i18n).mount("#app");

这边有一个地方一定要特别注意，在使用 Vue I18n Composition API 的时候，一定要在 createI18n 设定里面把 legacy 设成 false 才可以使用。

官方文件：https://vue-i18n.intlify.dev/guide/advanced/composition.html#basic-usage

都设定好了之後我们就直接来看一下 component 的部分

<script>
import { useI18n } from "vue-i18n";
export default {
  name: "App",
  setup() {
    const { t, locale } = useI18n();
    return {
      t,
      locale,
    };
  },
};
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <nav>
    <select v-model="locale">
      <option>zh-TW</option>
      <option>en-US</option>
      <option>ja-JP</option>
    </select>
  </nav>
  <p>{{ t("cancel") }}</p>
  <p>{{ t("email") }}</p>
  <p>{{ t("date") }}</p>
  <p>{{ t("subject") }}</p>
  <p>{{ t("message") }}</p>
  <p>{{ t("upload") }}</p>
</template>

首先我在 setup 里面把 useI18n 里面的 t 这个方法给取出来丢到 template 上面，这个函式可以对应你 JSON的key来把相对应的内容给取出来，再来我设定了一个 select 的下拉选单，透过 useI18n 里面的 locale来绑定 select，让他可以在切换的时候，直接帮我切换语系，不会重整页面。

但是这样还没完．这个时候假设我们选取了其他语系，然後重新整理网页，这个时候它就会切回我们的预设语系，这边我预设是 zh-TW ，所以网页 reload 的时候就会变中文的，所以接下来我们要来处理一下这个语系储存的部分，其实这有很多种的做法，有的是由後端去储存现在user所选取的语系，然後我们抓回来後在给予设定，又或是切换语系的时候我们来改变使用者的网址，在他的 domain 上面加入zh-TW或是en-US等字串来判断他当前的语系，今天要来做一个比较简单且通用的方式，就是把目前的语系写入到我们的localstorage 里面，然後画面 reload 的时候再把它给取出来设定就好了。

首先我们先watch一下

<script>
import { watch } from "vue";
import { useI18n } from "vue-i18n";
export default {
  name: "App",
  setup() {
    const { t, locale } = useI18n();

    watch(locale, (newlocale) => {
      localStorage.setItem("locale", newlocale);
    });

    return {
      t,
      locale,
    };
  },
};
</script>

我们 watch 了 locale，只要我一改变 locale 就会执行 watch ，然後把 newlocale 给塞入 localStorage 里面，所以每一次只要改变了语系我们的 localStorage 里面的这个 locale 就会是我们选择的语系。

再来回到 main.js，修改一下我们在处理初始化的语系这边

const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem("locale") ?? "zh-TW",
  fallbackLocale: "zh-TW",
  messages: {
    "zh-TW": zh,
    "en-US": en,
    "ja-JP": ja
  }
});

这边你会看到我在这边取得 localStorage 里面的 locale，如果没有这个 localStorage 的话就给他一个预设值 zh-TW，所以每一次页面重新整理的时候就会拿到目前存入 localStorage 的语系，而初始化那个语系。

关於 ?? 的这个语法，它其实是ES11的语法 Nullish coalescing operator中文翻译叫做 空值合并运算符，它是一个简单的语法，当左侧的 value 为 null 或者 undefined 时，它就会 return 右侧 value，不然就 return 左侧 value

MDN文件可以参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

这个范例我有放到 codesandbox 上面，有兴趣的朋友可以上去看一下
https://codesandbox.io/s/vue3-i18n-j1nbt

那如果对於Vue3不够熟的话呢?

Ps. 购买的时候请登入或注册该平台的会员，然後再使用下面连结进入网站点击「立即购课」，这样才可以让我获得更多的课程分润，还可以帮助我完成更多丰富的内容给各位。

我有开设了一堂专门针对Vue3从零开始教学的课程，如果你觉得不错的话，可以购买我课程来学习
https://hiskio.com/bundles/9WwPNYRpz?s=tc

那如果对於JS基础不熟的朋友，我也有开设JS的入门课程，可以参考这个课程
https://hiskio.com/bundles/b9Rovqy7z?s=tc

订阅Mike的频道享受精彩的教学与分享

Mike 的 Youtube 频道
Mike的medium
MIke 的官方 line 帐号，好友搜寻 @mike_cheng