时间戳

首页 > 解决方案 > '@vue/compiler-sfc' 的 Webpack 'vue-loader' 编译问题

javascript - '@vue/compiler-sfc' 的 Webpack 'vue-loader' 编译问题

问题描述

问题

我们正在构建一个新应用程序，并选择使用 GULP 和 Webpack 管道来编译 SCSS、Vue 3 和 Typescript 文件。不幸的是，我花了最后一天寻找一个递归问题的答案，我解决了一个问题，然后它恢复到前一个问题，解决了这个问题，它恢复到我已经解决的问题，依此类推。

作为引入vue-loader初始错误的一部分，抛出声明vue-template-compiler是必需的依赖项。下载缺少的依赖项可以解决问题，但现在会抛出一个新错误，说明版本与 Vue 不匹配，因为它们都需要在同一版本上。

环顾四周后，我知道在 v3 中vue-template-compiler已被替换@vue/compiler-sfc，所以我自然地卸载了前者并安装了后者。但是，它让我回到了它声明vue-template-compiler需要安装或通过选项指定兼容编译器的地方。

我已经查看了有关指定编译器的各种问题和答案，webpack.config但不断得到引导回到我查看过的内容。

尝试的解决方案

Vue 3 的 Vue 模板 Webpack 的 Vue 3问题 Vue 3 支持 Typescript

错误一

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 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 配置

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"
            }
        ]
    }
}

打包 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"
  }
}

标签： javascriptvue.jswebpackvuejs3

解决方案

就在我即将发布这个问题时，我发现了问题所在。本质上，该vue-loader版本是不正确的并回答了这个问题，因此另一个开发人员不会花费数小时寻找答案。

在为应用程序构建前端结构的早期，我遇到了一个问题，即 NPM 中 Vue 的最新版本是 v2.6.12，下一个版本是 v3.0.11。很简单，只需指定版本即可解决。

事实证明，vue-loader在撰写本文时，最新版本是 v15.9.6，而下一个版本是 v16.2.0。正如您从包含的package.json文件中注意到的那样，指定的版本是 v15.9.6。

要使 Vue 3 与vue-loader它一起工作，安装的版本必须不低于“16.2.0”。

编辑：2022 年 2 月 16 日

通过 NPM 默认下载 Vue 现在下拉 v3。依赖包（例如 vue-loader、@vue/compiler-sfc 等）已被修改，因此下拉的最新版本适用于 Vue v3 而不是 v2。从理论上讲，这将意味着问题中的问题将消失。

推荐阅读