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

Question

我刚刚开始使用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"
},

当我运行我的项目时，我看到web控制台上的错误

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

我在这里做错什么了吗？我失去了什么依赖吗？任何帮助都会很感激的。

Answer 1

您应该安装与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",
 globalInjection: true,
  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>

示例

在组合API (setup)中：

import { useI18n } from 'vue-i18n';
...

export default defineComponent({
    setup() {
        const { t } = useI18n();
      // then use it like t('message.greeting')
  }
})

Answer 2

我相信您正在使用的"vue-i18n": "^8.22.1" (git)与Vue 3不兼容，原因是Vue 3在插件方面的工作方式发生了重大变化(自述不太清楚)。您可以尝试vue-i18n-next，它是Vue 3“准备好”，但仍处于测试阶段.

此外，在Vue 2中使用v8.x时，一定要使用new关键字- const i18n = new VueI18n()创建实例(这是一个类)

...if您是Vue的新手，使用Vue 2可能会更好。Vue 3非常新(几天前发布)，大多数生态系统(各种插件和组件库)还没有准备好。你可能不需要所有的新东西。从v2开始，享受它稳定的生态系统和互联网上的大量学习资源，当你需要的所有工具都转换到v3时，就改用v3 .