Vue.js 3 - Error while using VueI18n plugin in vue - Cannot set property '_vm' of undefined

问题

I've just started working with Vue.js and learning it through some online code snippet and tutorials. I'm trying to implement internationalization support for my vue project, but I'm getting error in web-console.

Here are my code snippets

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');

Here is my HelliI18n.vue file where I want to use translation

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

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

Following code is from my package.json file (for versions)

"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"
},

When I run my project, I see following error on web console

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

Anything I'm doing wrong here ? any dependency I'm missing ? Any help would be really appreciated.

回答1:

You should install vue-i18n@next which is compatible with Vue 3:

 npm install --save vue-i18n@next

or via using yarn

yarn add vue-i18n@next

Basic usage :

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

回答2:

I believe "vue-i18n": "^8.22.1" (git) you are using is not compatible with Vue 3 due to a major changes how Vue 3 works with regards to plugins (not very clear from the readme for sure). You can try vue-i18n-next which is Vue 3 "ready" but still in beta stage....

Also, when using v8.x with Vue 2, be sure to create instance with new keyword - const i18n = new VueI18n() (it's a class)

...if you are new to Vue, it would be probably better for you to work with Vue 2. Vue 3 is pretty new (released few days ago) and most of the ecosystem (all sorts of plugins and component libraries) is not ready for it yet. And you probably don't need all the new stuff. Start with v2, enjoy it's stable ecosystem and lots of learning resources on the internet and switch to v3 when all the tools you need make transition to v3 ....

来源：https://stackoverflow.com/questions/64540998/vue-js-3-error-while-using-vuei18n-plugin-in-vue-cannot-set-property-vm-o

标签

javascript

Vue.js

vue-component

vuejs3

vue-i18n