vue-3 项目似乎很糟糕。 npm run serve 不起作用

Question

我今天早上去重新部署我的 vue3 网站，但构建一直失败并显示以下消息：

-  Building for production...
 ERROR  Failed to compile with 1 error1:45:13 PM

 error  in ./src/main.js

Syntax Error: Thread Loader (Worker 0)
Failed to load config "plugin:vue/vue3-essential" to extend from.
Referenced from: /home/runner/work/nonunonu-site/nonunonu-site/package.json
    at Array.reduceRight (<anonymous>)


 @ multi ./src/main.js
 ERROR  Build failed with errors.

Error: Process completed with exit code 1.

在谷歌搜索并尝试了各种修复后，我显然更破坏了我的项目，现在当我尝试运行 npm run serve 时收到此消息

    enter code hereStarting development server...
12% building ... modules 0 active/home/andy/Documents/Websites/nonunonu/node_modules/webpack/lib/Dependency.js:332
                throw new Error(
                ^

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
    at ProvidedDependency.set (/home/andy/Documents/Websites/nonunonu/node_modules/webpack/lib/Dependency.js:332:9)
    at iterationDependencies (/home/andy/Documents/Websites/nonunonu/node_modules/@vue/cli-service/node_modules/webpack/lib/Compilation.js:940:21)
    at /home/andy/Documents/Websites/nonunonu/node_modules/@vue/cli-service/node_modules/webpack/lib/Compilation.js:950:8
    at /home/andy/Documents/Websites/nonunonu/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:409:6
    at /home/andy/Documents/Websites/nonunonu/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:155:13
    at eval (eval at create (/home/andy/Documents/Websites/nonunonu/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at /home/andy/Documents/Websites/nonunonu/node_modules/case-sensitive-paths-webpack-plugin/index.js:178:9
    at /home/andy/Documents/Websites/nonunonu/node_modules/case-sensitive-paths-webpack-plugin/index.js:125:7
    at /home/andy/Documents/Websites/nonunonu/node_modules/case-sensitive-paths-webpack-plugin/index.js:125:7
    at CaseSensitivePathsPlugin.fileExistsWithCase (/home/andy/Documents/Websites/nonunonu/node_modules/case-sensitive-paths-webpack-plugin/index.js:95:5)
    at /home/andy/Documents/Websites/nonunonu/node_modules/case-sensitive-paths-webpack-plugin/index.js:118:10
    at CaseSensitivePathsPlugin.getFilenamesInDir (/home/andy/Documents/Websites/nonunonu/node_modules/case-sensitive-paths-webpack-plugin/index.js:52:5)
    at CaseSensitivePathsPlugin.fileExistsWithCase (/home/andy/Documents/Websites/nonunonu/node_modules/case-sensitive-paths-webpack-plugin/index.js:101:8)
    at /home/andy/Documents/Websites/nonunonu/node_modules/case-sensitive-paths-webpack-plugin/index.js:118:10
    at Array.<anonymous> (/home/andy/Documents/Websites/nonunonu/node_modules/case-sensitive-paths-webpack-plugin/index.js:72:5)
    at Storage.finished (/home/andy/Documents/Websites/nonunonu/node_modules/@vue/cli-service/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)

我对开发还很陌生，所以任何帮助或建议都会很棒，此时我想删除整个网站并重新开始。谢谢！

这是我的 package.json

{
  "name": "nonunonu",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "animejs": "^3.2.1",
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-service": "^3.12.1",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^8.8.0",
    "eslint-plugin-vue": "^7.20.0",
    "sass": "^1.32.12",
    "sass-loader": "^10",
    "webpack": "^5.68.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Answer 1

在查看了您的 repo 之后，在我进行了以下更改后，我能够运行它：

1. 将"@vue/cli-plugin-babel" 和"@vue/cli-service" 升级到最新版本("~4.5.15")
2. 将"babel-eslint" 替换为"@babel/eslint-parser": "^7.5.4"
3. 删除webpack

需要明确的是，您的 devDependencies 此时应如下所示：

  "devDependencies": {
    "@babel/eslint-parser": "^7.5.4",
    "@vue/cli-plugin-babel": "^4.5.15",
    "@vue/cli-service": "^4.5.15",
    "@vue/compiler-sfc": "^3.0.0",
    "eslint": "^8.8.0",
    "eslint-plugin-vue": "^7.20.0",
    "sass": "^1.32.12",
    "sass-loader": "^10"
  },

4. 将解析器（在package.json > eslintConfig.parserOptions 中）从"babel-eslint" 更改为"@babel/eslint-parser"
5. 运行rm -rf node_modules/ && npm i
6. 从Letters.vue 和Cloud.vue 的<script> 标记中删除lang="ts"（您没有在项目中的任何地方使用TS，文件的内容是JavaScript，没有任何类型引用）。很可能是您错误地添加了它们。

此时，您应该能够成功地服务/构建项目。

如果您问自己我是如何确定每个包的确切版本更改的：我安装了一个新的 vue create test 项目并查看了差异。其余的只是在尝试服务时在控制台中跟踪错误消息。