我尝试使用Webpack将一个大的现有代码库从Vue2迁移到Vue3,所以我在package.json中升级了必要的包,如下所示(这里没有问题):
"vue": "^3.2.45",
"@vue/compat": "^3.2.45",
"@vue/cli-plugin-babel": "^5.0.8",
"@vue/cli-plugin-eslint": "^5.0.8",
"@vue/cli-plugin-typescript": "^5.0.8",
"@vue/cli-plugin-unit-jest": "^5.0.8",
"@vue/cli-service": "^5.0.8",
"@vue/compiler-sfc": "^3.2.0",
"vue-class-component": "^8.0.0-rc.1",
"vue-loader": "^17.0.1",
...
现在Webpack构建总是失败,并显示以下错误:“单文件组件中至少需要一个模板或脚本。",无论尝试编译哪个单文件组件。
所以我调试了错误的来源,也就是@vue\compiler-sfc\dist\compiler-sfc.cjs.js)
,发现解析组件文件的函数被调用了两次,第一次是我的组件的实际代码,它工作得很好,第二次是一个已经编译好的版本,看起来像这样:
import { render } from "./deploymentInfos.vue?vue&type=template&id=1ced640a&ts=true"
import script from "./deploymentInfos.vue?vue&type=script&lang=ts"
export * from "./deploymentInfos.vue?vue&type=script&lang=ts"
import exportComponent from "\\node_modules\\vue-loader\\dist\\exportHelper.js"
const __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__file',"/deploymentInfos/deploymentInfos.vue"]])
/* hot reload */
if (module.hot) {
__exports__.__hmrId = "1ced640a"
const api = __VUE_HMR_RUNTIME__
module.hot.accept()
if (!api.createRecord('1ced640a', __exports__)) {
api.reload('1ced640a', __exports__)
}
...
当然,它无法从中解析<script>
和<template>
,并抛出错误。
我想我有某种错误的配置,但无法找到它。有人知道在哪里寻找?
1条答案
按热度按时间t30tvxxf1#
已解决
问题是另一个webpack插件也使用了
vue-loader
,这就是解析文件的第二个调用的来源。因此,如果您遇到相同的错误消息,请尝试检查您的webpack配置是否存在
vue-loader
的多次使用。