[英]Webpack 'vue-loader' compilation issues with '@vue/compiler-sfc'
The Problem问题
We're building a new application and have opted to go with a GULP and Webpack pipeline for compiling SCSS, Vue 3 and Typescript files. We're building a new application and have opted to go with a GULP and Webpack pipeline for compiling SCSS, Vue 3 and Typescript files. Unfortunately, I've spent the last day looking for an answer to a recursive issue where I fix one problem and it reverts back to the previous problem, fix that problem it reverts to the one I've already fixed and so on.
不幸的是,我花了最后一天寻找递归问题的答案,我解决了一个问题,然后它恢复到前一个问题,解决了那个问题,它恢复到我已经解决的问题,依此类推。
As part of pulling in vue-loader
an initial error is thrown stating vue-template-compiler
is a required dependency.作为
vue-loader
的一部分,会抛出一个初始错误,指出vue-template-compiler
是必需的依赖项。 Downloading the missing dependency fixes the issue but now a new error is thrown stating a version mismatch with Vue as they both need to be on the same version.下载缺少的依赖项可以解决问题,但现在会抛出一个新错误,说明版本与 Vue 不匹配,因为它们都需要在同一版本上。
After looking around I'm aware vue-template-compiler
was replaced with @vue/compiler-sfc
in v3, so naturally I've uninstalled the former and installed the latter.环顾四周后,我知道
vue-template-compiler
在 v3 中已替换为@vue/compiler-sfc
,所以我自然地卸载了前者并安装了后者。 However, it lead me right back to square one where it stated vue-template-compiler
needs installing or to specify a compatible compiler via the options.然而,它让我回到了第一个地方,它声明
vue-template-compiler
需要安装或通过选项指定兼容的编译器。
I've looked at various questions and answers on specifing the compiler in webpack.config
but constantly got lead back to stuff I'd viewed.我已经查看了有关在
webpack.config
中指定编译器的各种问题和答案,但不断地回到我查看过的内容。
Attempted Solutions尝试的解决方案
Vue 3 Problem with Vue Template Webpack for Vue 3 Vue 3 Supporting Typescript Vue 模板Webpack 的 Vue 3问题Vue 3 支持 Typescript
Error One错误一
ERROR in ./Content/Vue/Login.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
Vue packages version mismatch:
- vue@3.0.11 (<Project Path>\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (<Project Path>\node_modules\vue-template-compiler\package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
Error Two错误二
ERROR in ./Content/Vue/Login.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
at loadTemplateCompiler (<Project Path>\node_modules\vue-loader\lib\index.js:24:31)
at Object.module.exports (<Project Path>\node_modules\vue-loader\lib\index.js:69:35)
ERROR in ./Content/Vue/Login.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (<Project Path>\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports (<Project Path>\node_modules\vue-loader\lib\index.js:67:22)
webpack 5.36.2 compiled with 2 errors in 153 ms
Webpack Configuration Webpack 配置
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
entry: {
login: "./Content/Vue/Login.vue"
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "../../wwwroot/Distribution/Scripts")
},
mode: "development",
plugins: [
new VueLoaderPlugin()
],
resolve: {
alias: {
vue: "@vue/runtime-dom"
}
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/],
},
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: "vue-loader"
}
]
}
}
Package JSON Configuration Package JSON 配置
{
"name": "***",
"version": "1.0.0",
"description": "***",
"main": "index.js",
"license": "UNLICENSED",
"repository": "***",
"scripts": {
"webpack": "webpack --config=Scripts/Webpack/webpack.config.js"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.11",
"css-loader": "^5.2.4",
"file-loader": "^6.2.0",
"gulp": "^4.0.2",
"gulp-clean": "^0.4.0",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-rename": "^2.0.0",
"gulp-run": "^1.7.1",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^2.6.5",
"mini-css-extract-plugin": "^1.6.0",
"ts-loader": "^9.1.1",
"typescript": "^4.2.4",
"url-loader": "^4.1.1",
"vue-loader": "^15.9.6",
"webpack": "^5.35.0",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"vue": "^3.0.11",
"vue-router": "^4.0.6"
}
}
Just as I was about to post this question I figured out the problem.就在我即将发布这个问题时,我发现了问题所在。 Essentially the
vue-loader
version is incorrect and answering this so another developer doesn't spend hours looking for an answer.本质上,
vue-loader
版本是不正确的,并且会回答这个问题,因此另一个开发人员不会花费数小时寻找答案。
Early on in building the frontend structure for the application I hit an issue where the latest version of Vue in NPM is v2.6.12 and the next version is v3.0.11.在为应用程序构建前端结构的早期,我遇到了一个问题,即 NPM 中的 Vue 的最新版本是 v2.6.12,下一个版本是 v3.0.11。 Simple enough to resolve just specify the version.
很简单,只需指定版本即可解决。
Turns out it's the same issue with vue-loader
and at the time of writing the latest version is v15.9.6 whilst the next version is v16.2.0.事实证明,
vue-loader
也存在同样的问题,在撰写本文时,最新版本是 v15.9.6,而下一个版本是 v16.2.0。 As you'll note from the included package.json
file, the version specified is v15.9.6.正如您将在随附的
package.json
文件中注意到的那样,指定的版本是 v15.9.6。
For Vue 3 to work alongside vue-loader
it's imperative that the version installed is not below '16.2.0'.要使 Vue 3 与
vue-loader
一起工作,安装的版本必须不低于“16.2.0”。
Edit: 16 February 2022编辑:2022 年 2 月 16 日
The default download of Vue via NPM now pulls down v3.通过 NPM 默认下载的 Vue 现在下拉 v3。 Dependent packages (eg vue-loader, @vue/compiler-sfc etc) have been modified so the latest version pulled down works with Vue v3 rather than v2.
依赖包(例如 vue-loader、@vue/compiler-sfc 等)已被修改,因此下拉的最新版本适用于 Vue v3 而不是 v2。 Theoretically this will mean the problem within the question will disappear.
从理论上讲,这将意味着问题中的问题将消失。
just run this may be solve this problem npm i vue@3.2.26只要运行这个可能会解决这个问题 npm i vue@3.2.26
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.