Question

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

2020-10-26

34461

javascript vue.js vuejs3 vue-composition-api vue-i18n

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

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，但仍处于测试阶段....

此外，在将 v8.x 与 Vue 2 结合使用时，请务必使用 new 关键字创建实例 - const i18n = new VueI18n() （它是一个类）

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