我正在尝试将Vue 2 + Vuetify项目迁移到Vue 3(和Vuetify各自的版本)，遵循此迁移指南，但我得到以下错误:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'default')
at LoaderSlot (vuetify_components.js?v=3010edea:2040:32)
at convertLegacyAsyncComponent (chunk-UBAAKBY2.js?v=0f527f5d:7835:15)
at convertLegacyComponent (chunk-UBAAKBY2.js?v=0f527f5d:7863:12)
at _createVNode (chunk-UBAAKBY2.js?v=0f527f5d:8000:12)
at createVNodeWithArgsTransform (chunk-UBAAKBY2.js?v=0f527f5d:7917:10)
at default (vuetify_components.js?v=3010edea:8497:13)
at normalizeChildren (chunk-UBAAKBY2.js?v=0f527f5d:8112:34)
at createBaseVNode (chunk-UBAAKBY2.js?v=0f527f5d:7954:5)
at _createVNode (chunk-UBAAKBY2.js?v=0f527f5d:8021:10)
at createVNodeWithArgsTransform (chunk-UBAAKBY2.js?v=0f527f5d:7917:10)
我的package.json文件
"dependencies": {
"@vue/compat": "^3.1.0",
"axios": "^0.27.2",
"axios-retry": "^3.3.1",
"core-js": "^3.8.3",
"luxon": "^3.0.4",
"socket.io-client": "^4.5.2",
"vue": "^3.1.0",
"vue-i18n": "^9.2.0",
"vue-inline-svg": "^2.1.0",
"vue-router": "^4.1.0",
"vue-toastification": "^2.0.0-rc.5",
"vuetify": "^3.1.0",
"vuex": "^4.1.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.6.1",
"@vue/compiler-sfc": "^3.1.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^9.8.0",
"sass": "^1.32.7",
"vite": "^2.5.4"
}
我的main.js文件
import { createApp } from 'vue'
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'
import App from './App.vue'
import router from './globals/router'
import vuetify from './globals/plugins/vuetify'
import i18n from './globals/plugins/i18n'
import toastOpts from './globals/plugins/toast'
// create vue app
const app = createApp(App)
// register plugins
app.use(Toast, toastOpts)
app.use(i18n)
app.use(router)
app.use(vuetify)
// mount app
app.mount('#app')
我的vuetify.js文件
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import colors from '@/globals/styles/_export.module.scss'
export default createVuetify({
components,
directives,
theme: {
themes: {
light: {
primary: {
lighten5: colors.primaryLighten5,
lighten4: colors.primaryLighten4,
lighten3: colors.primaryLighten3,
lighten2: colors.primaryLighten2,
lighten1: colors.primaryLighten1,
base: colors.primaryBase,
darken1: colors.primaryDarken1,
darken2: colors.primaryDarken2,
darken3: colors.primaryDarken3,
darken4: colors.primaryDarken4,
}
}
}
}
})
如果我在main.js文件上注释掉app.use(vuetify)，错误就会消失…所以基本上我需要知道，如果这实际上是一个错误，或者我做错了安装?
感谢你，我删除了@vue/compat包，它工作了。
@vue/compat文档对此非常清楚，我只是错过了它:
如果你的项目依赖于组件库，如Vuetify, Quasar或ElementUI，最好等待他们的Vue 3兼容版本