Vue.js 3 - 在 vue 中使用 Vue I18n 插件时出错 - 无法设置未定义的 属性 '_vm'
Vue.js 3 - Error while using Vue I18n plugin in vue - Cannot set property '_vm' of undefined
我刚刚开始使用 Vue.js 并通过一些在线代码片段和教程学习它。我正在尝试为我的 vue 项目实现国际化支持,但我在网络控制台中遇到错误。
这是我的代码片段
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) 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 Vue 3“准备就绪”但仍处于测试阶段....
此外,在 Vue 2 中使用 v8.x 时,请务必使用 new
关键字创建实例 - const i18n = new VueI18n()
(它是 class)
...如果您是 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",
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')
}
})
我刚刚开始使用 Vue.js 并通过一些在线代码片段和教程学习它。我正在尝试为我的 vue 项目实现国际化支持,但我在网络控制台中遇到错误。
这是我的代码片段
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) 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 Vue 3“准备就绪”但仍处于测试阶段....
此外,在 Vue 2 中使用 v8.x 时,请务必使用 new
关键字创建实例 - const i18n = new VueI18n()
(它是 class)
...如果您是 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",
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')
}
})