Vue.js 3-在Vue中使用VueI18n插件时出错-无法设置未定义的属性'_vm'

如何解决Vue.js 3-在Vue中使用VueI18n插件时出错-无法设置未定义的属性'_vm'

我刚刚开始使用Vue.js，并通过一些在线代码段和教程对其进行了学习。我正在尝试为我的vue项目实施国际化支持，但是在Web控制台中出现错误。

这是我的代码段

main.js

import { createApp } from 'vue';
import App from './App.vue';
import VueI18n from 'vue-i18n'
import router from './router/index'

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)
        }
    })
   return messages
}

const i18n = VueI18n({
    locale: process.env.VUE_APP_I18N_LOCALE || 'en',fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',messages: loadLocaleMessages()
})


const app = createApp(App);
app.use(router);
app.use(i18n);
app.mount('#app');

这是我要使用翻译的 HelliI18n.vue 文件

<template>
    hello
    <p>{{ $t('hello') }}</p>
</template>

<script>
    export default {
        name: 'HelloI18n'
    }
</script>

以下代码来自我的 package.json 文件（对于版本）

"dependencies": {
    "core-js": "^3.6.5","vue": "^3.0.0","vue-i18n": "^8.22.1","vue-router": "^4.0.0-0"
},"devDependencies": {
    "@intlify/vue-i18n-loader": "^1.0.0","@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-service": "~4.5.0","@vue/compiler-sfc": "^3.0.0","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-vue": "^7.0.0-0","vue-cli-plugin-i18n": "~1.0.1"
},

运行项目时，我在网络控制台上看到以下错误

Uncaught TypeError: Cannot set property '_vm' of undefined
at VueI18n (vue-i18n.esm.js?a925:1173)
at eval (main.js?56d7:19)
at Module../src/main.js (app.js:1167)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at Object.1 (app.js:1228)
at __webpack_require__ (app.js:854)
at checkDeferredModules (app.js:46)
at app.js:994
at app.js:997

我在这里做错什么了吗？我缺少任何依赖吗？任何帮助将不胜感激。

解决方法

我相信您正在使用的"vue-i18n": "^8.22.1"（git）与Vue 3不兼容，这是因为Vue 3在插件方面的工作方式发生了重大变化（当然，自述文件中还不清楚）。您可以尝试vue-i18n-next，这是Vue 3的“就绪”版本，但仍处于测试阶段....

此外，在vue 2中使用v8.x时，请确保使用new关键字-const i18n = new VueI18n()（这是一个类）创建实例

...如果您是Vue的新手，那么使用Vue 2可能会更好。Vue 3是非常新的（几天前发布），并且是大多数生态系统（各种插件和组件库））尚未准备好。而且您可能不需要所有新东西。从v2开始，享受其稳定的生态系统和互联网上的大量学习资源，并在所有需要的工具过渡到v3时切换到v3。

您应安装与Vue 3兼容的vue-i18n@next。

 npm install --save vue-i18n@next

或通过使用纱线

yarn add vue-i18n@next

基本用法：

import { createApp } from "vue";
import App from "./App.vue";

import { createI18n } from "vue-i18n";

const i18n = createI18n({
  legacy: false,locale: "ja",messages: {
    en: {
      message: {
        language: "English",greeting: "Hello !"
      }
    },ar: {
      message: {
        language: "العربية",greeting: "السلام عليكم"
      }
    },es: {
      message: {
        language: "Español",greeting: "Hola !"
      }
    }
  }
});

createApp(App).use(i18n).mount("#app");

App.vue

<template>
  <div>
    <select v-model="lang">
      <option value="en">English</option>
      <option value="ar">العربية</option>
      <option value="es">Español</option>
    </select>

    <h2>{{ $t("message.greeting",{},{ locale: lang }) }}</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lang: "en",};
  },};
</script>

EXAMPLE