Vue - 由于 webpack 版本（vue-cli-service、laravel-mix、webpack）导致 npm run serve 命令崩溃

Posted 2023-02-23

【中文标题】Vue - 由于 webpack 版本（vue-cli-service、laravel-mix、webpack）导致 npm run serve 命令崩溃

【英文标题】：Vue - npm run serve command crashes because of webpack version (vue-cli-service, laravel-mix, webpack)

【发布时间】：2021-11-08 15:28:54

【问题描述】：

为了解释我的问题，我将首先说我目前正在使用后端 API Laravel（无关）在 Vue 中制作系统。我将它们作为两个独立的项目。我的问题出在前端 Vue 部分。我使用 Vue CLI 创建了它。

这是我的 package.json 文件：

"dependencies": 
    "@popperjs/core": "^2.9.3",
    "axios": "^0.21.1",
    "bootstrap": "^5.1.0",
    "core-js": "^3.6.5",
    "dotenv": "^10.0.0",
    "vue": "^3.0.0",
    "vue-axios": "^3.2.5",
    "vue-plugin-load-script": "^2.0.1",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2",
    "vuex-persistedstate": "^4.0.0"
  ,
  "devDependencies": 
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "laravel-mix": "^6.0.31",
    "prettier": "^2.2.1",
    "resolve-url-loader": "^4.0.0",
    "sass": "^1.38.1",
    "sass-loader": "^12.1.0",
    "webpack": "^5.52.1"
  

如您所见，我正在使用 laravel-mix（特别是使用 npm run dev 命令）。 所以要使用 laravel-mix，我还需要安装 webpack。

现在问题出现在我尝试运行 npm run serve 命令来启动应用程序时。我收到此错误：

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)

我找到了 1 个解决方案，它是使用 webpack 4 而不是 5，这不起作用，因为当我使用 webpack 4 时，我可以运行“npm run serve”，但是当我运行“npm run dev”时，它不会混合我的资产。没有错误，只有命令被解析，没有别的。

我真的没有找到任何解决方案，除了切换 webpack 版本，但是资产混合部分在项目中真的很关键。

---

更新 1：

这是我的 webpack.mix.js

let mix = require("laravel-mix");

mix.sass('src/assets/sass/style.scss', 'src/assets/sass')

    .styles([
        'src/assets/template/css/datatables.min.css',
        'src/assets/template/css/rowGroup.dataTables.min.css',
        'src/assets/template/css/fullcalendar.min.css',
        'src/assets/template/css/select2.min.css',
        'src/assets/template/css/bootstrap-colorpicker.min.css',
        'src/assets/template/css/bootstrap-datepicker.min.css',
        'src/assets/template/css/bootstrap.min.css',
        'src/assets/template/css/icons.min.css',
        'src/assets/template/css/app.min.css',
        'src/assets/sass/style.css'
    ], 'public/css/style.css')

    .scripts([
        'src/assets/template/js/jquery.min.js',
        'src/assets/template/js/bootstrap.min.js',
        'src/assets/template/js/metismenu.min.js',
        'src/assets/template/js/simplebar.min.js',
        'src/assets/template/js/node-waves.min.js',
        'src/assets/template/js/waypoints.min.js',
        'src/assets/template/js/jquery-counterup.min.js',
        'src/assets/template/js/datatables.min.js',
        'src/assets/template/js/dataTables.rowGroup.min.js',
        'src/assets/template/js/moment.min.js',
        'src/assets/template/js/jquery-ui-dist.min.js',
        'src/assets/template/js/fullcalendar.min.js',
        'src/assets/template/js/select2.min.js',
        'src/assets/template/js/bootstrap-colorpicker.min.js',
        'src/assets/template/js/bootstrap-datepicker.min.js',
        'src/assets/template/js/apexcharts.min.js',
        'src/assets/template/js/app.min.js',
        'src/assets/js/script.js'
    ], 'public/js/script.js');

【问题讨论】：

你能展示你的 webpack.mix.js 吗？

更新了，我放在那里

还有 package.json

我已经放了package.json

【参考方案1】：

无法解决这个问题，所以我找到了 laravel-mix

的替代品

我使用 gulp 并创建了自己的脚本来解析 sass 并混合 css、js 和缩小。

https://gulpjs.com/