如何在 Vue 3 Web 组件中使用 vue-i18n？

Question

我正在使用 vue-cli 4.5.13 和 --target wc 选项创建一个 Vue Web 组件。我还需要组件使用 vue-i18n-next 插件（vue 3 项目的最新版本），这需要将一些选项传递给主 Vue 实例，但现在没有主实例，因为入口点是 vue 组件本身，所以 i18n 必须在组件内实例化。

我为 vue2 找到了这个问题： How can I use vue-i18n in a Vue web component? 它适用于 vue2，但在组件选项中实例化 i18n 对象对 vue3 无效（this.$i18n 保持未定义）。所以这是行不通的：

export default {
  name: "custom-compo",
  i18n: i18n,
  components: { ChildComponent }
  data, methods...
};

如果导出 Web 组件（并在标准页面上使用它）以及 npm run serve 使用内部包含此组件的标准应用程序（但再次在组合中实例化 i18n 以回答该问题），该解决方案应该可以工作，不在 main.js 中）

我不是问如何在普通 vue 项目中设置 vue-i18n，而是如何使用 vue-cli 在将要构建或导出为自定义元素或 Web 组件的组件中初始化 i18n， Vue 3.

我没有使用组合 api 和 setup()，而是旧选项 api。刚刚升级到 vue3 包并根据 docs 更改了不推荐使用的语法。

Answer 1

步骤 1：使用以下命令安装 vue-i18n 和依赖 npm 包，

npm install vue-i18n@next
npm install --save-dev @intlify/vue-i18n-loader

第 2 步：在 src 文件夹中创建 i18n 作为单独的 i18n.js 文件

import { createI18n } from 'vue-i18n'


function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key).default
    }
  })
  return messages
}

export default createI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

第三步：在main.js中导入i18n

import i18n from './i18n'

第 4 步：在 main.js 中添加 i18n、router、store 对 createApp 的引用

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import i18n from './i18n'
const app = createApp(App).use(i18n).use(store).use(router)
app.mount('#app')

第 5 步：设计语言 dropdown 菜单

<li class="nav-item dropdown" ref="dropdown">
  <button class="nav-link" data-toggle="dropdown" @click="toggleDropdown">
    <i class="flag-icon " :class="selectedLanguage === 'en' ? 'flag-icon-us': 'flag-icon-es'"></i>
  </button>
  <div class="dropdown-menu dropdown-menu-right p-0" :class="{'show':isDropdownOpened}">
    <a href="#" class="dropdown-item" :class="selectedLanguage === 'en' ? 'active': ''" @click.prevent="changeLanguage('en')">
      <i class="flag-icon flag-icon-us mr-2"></i> English
    </a>
    <a href="#" class="dropdown-item" :class="selectedLanguage === 'es' ? 'active': ''" @click.prevent="changeLanguage('es')">
      <i class="flag-icon flag-icon-es mr-2"></i> Spanish
    </a>
  </div>
</li>

第六步：在组件内部添加changeLanguage方法

changeLanguage (locale) {
  this.$i18n.locale = locale
  this.selectedLanguage = locale
  this.isDropdownOpened = false
}

第 7 步：在 src 文件夹中创建 locales 文件夹

第 8 步：创建 en.json 和 es.json 两个单独的文件

第 9 步：在en.json 文件中如下所示

{
  "common.login": "Login",
  "common.signout": "Sign Out",
  "common.switchuser": "Switch User",
  "common.profile": "Profile",
  "common.submit": "Submit"
}

第 10 步：在es.json 文件中如下所示

{
   "common.login": "Acceso",
   "common.signout": "Desconectar",
   "common.switchuser": "Cambiar de usuario",
   "common.profile": "Perfil",
   "common.submit": "Enviar"

}