如何在 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 和 vue 3 在将要构建或导出为自定义元素或 Web 组件的组件中初始化 i18n。

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

Answer 1

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

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

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

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()
})

第 3 步：i18n导入main.js

import i18n from './i18n'

第 4 步：在里面main.js添加对 createApp 的i18n, router,store引用

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>

第6步changeLanguage：在组件中添加方法

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

步骤7locales ：在src文件夹内创建文件夹

第 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"

}