Vue - npm 运行服务命令因 webpack 版本（vue-cli-service、laravel-mix、webpack）而崩溃

Question

为了解释我的问题，我首先要说的是我目前正在 Vue 中制作一个带有后端 API Laravel 的系统（无关紧要）。我将它们作为 2 个独立的项目。我的问题在前端 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 运行 dev 命令）。所以要使用 laravel-mix 我还需要安装 webpack.

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

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

而且我找到了 1 个使用 webpack 4 而不是 5 的解决方案，但这种方法不起作用，因为当我使用 webpack 4 时，我可以运行 "npm 运行 serve"但是当我运行 "npm 运行 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');

Answer 1

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

的替代品

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

https://gulpjs.com/

Vue - npm 运行服务命令因 webpack 版本（vue-cli-service、laravel-mix、webpack）而崩溃

Vue - npm run serve command crashes because of webpack version (vue-cli-service, laravel-mix, webpack)

npm

webpack

laravel-mix

vue-cli

vuejs3

Vue - npm 运行 服务命令因 webpack 版本（vue-cli-service、laravel-mix、webpack）而崩溃

Vue - npm run serve command crashes because of webpack version (vue-cli-service, laravel-mix, webpack)

npm

webpack

laravel-mix

vue-cli

vuejs3

Vue - npm 运行服务命令因 webpack 版本（vue-cli-service、laravel-mix、webpack）而崩溃