Vue3构建错误:单个< template>< script>文件组件中至少需要一个或

50pmv0ei  于 2023-02-09  发布在  Vue.js
关注(0)|答案(1)|浏览(7196)

我尝试使用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>,并抛出错误。
我想我有某种错误的配置,但无法找到它。有人知道在哪里寻找?

t30tvxxf

t30tvxxf1#

已解决
问题是另一个webpack插件也使用了vue-loader,这就是解析文件的第二个调用的来源。
因此,如果您遇到相同的错误消息,请尝试检查您的webpack配置是否存在vue-loader的多次使用。

相关问题