Day 27：语系包在 i 身上－Vue I18n 前置作业

因应国际化的需求，专案决定也要符合 international 的规格，Navbar 右上角的「选择语系」功能总算要开工了！话不多说，直接介绍接下来要安装的 plugin —— Vue I18n。

一开始看到 I18n 这名字还觉得很特别，想说到底是什麽意思？但它其实只是「internationalization」的简写版，因为单字总共有 20 个字母，扣掉单字的首尾字母，i 和 n 中间还剩 18 个字母，就是这样。

安装程序

除了 npm install vue-i18n，也可以直接以 Vue Cli 指令使用 vue add i18n，以下示范後者方式。

1. 选择专案预设语系
   （自动设置在 .env 档案中的 VUE_APP_I18N_LOCALE=zh，可手动调整）
2. 选择专案替代语系
   （自动设置在 .env 档案中的 VUE_APP_I18N_FALLBACK_LOCALE=en，可手动调整）
3. 选择语系存放的资料夹名称
4. 是否在单一元件档案内管理语系？（习惯集中管理的话则输入 N）
5. 是否设置版本迁移？（不需要则选择 N）

vue.config.js 设定挡

安装流程所选择的设置将会自动更新到 vue.config.js，如需调整仍可手动进行修改。

pluginOptions: {
    i18n: {
        locale: "zh",
        fallbackLocale: "en",
        localeDir: "locales",
        enableInSFC: false,
        enableBridge: false,
    },
},

• 若选项 4 选择 Y 同意在单一元件档案内管理语系，则会生成一个 HelloI18n.vue 档案，透过 <i18n> 定义语系内容，使用方式可参考「Single file components」文件介绍。
  

• 若选项 5 选择 Y 同意设置版本迁移，则会额外安装 vue-i18n-bridge；
  若有使用其 Composition API，需再安装 @vue/composition-api。

• pluginOptions 设置则会因此有所差异。（文件参考：enableInSFC、includeLocales、enableBridge）

  	pluginOptions: {
      i18n: {
        ... // 同上，略
        enableInSFC: true,
        includeLocales: false,
        enableBridge: true,
      },
    },
  

locales 资料夹

用来存放语系档案的位置，一开始只会先自动产生一个在选择专案预设语系时所输入的字串作为档名的语系档案，内容仍为预设的英文范例，所以需再另外新增一个 en.json 档案。

此外，由於档案预设为 json 格式，因此在编辑上须留意规则：

• 不能使用注解
• 不能使用单引号
• 最後一个项目不能以逗号结尾
  

i18n.js → plugins/vue-i18n.js

我们可以将档案归档至 plugins 资料夹内，并改名为 vue-i18n.js，集中所有与 vue 相关的 plugins 进行管理。（若有改动则需同步更新 main.js 中的引入路径）

档案中的 loadLocaleMessages 函式主要是透过判断档名，将语系档案中的讯息内容加入 VueI18n 实例中的 messages 设置，因此若已知专案所需的语系档名，则可手动引入并自行命名，如此一来可以更清楚地管理专案中有被使用到的语系档案。

另外，若有需要纪录使用者当前切换的语系，可利用 localStorage 储存状态，之後当使用者关闭页面再返回网页，或是重新整理页面时，都会先抓取 localStorage 所保存的语系资料，并以使用者当初离开页面之前所选择的语系显示出网页内容。

import Vue from "vue";
import VueI18n from "vue-i18n";

import en from "@/locales/en";
import zh from "@/locales/zh";

Vue.use(VueI18n);

export default new VueI18n({
  // locale: process.env.VUE_APP_I18N_LOCALE || 'zh',  // 原始预设
  locale: localStorage.getItem("locale") || "zh",      // localStorage储存状态
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
  messages: {
    zh: zh,
    en: en,
  },
});

参考资料

• Vue I18n