vue.js - 运行我的项目时出现错误

Posted

技术标签:

【中文标题】vue.js - 运行我的项目时出现错误【英文标题】:vue.js - I'm getting an error when running my project 【发布时间】:2021-02-22 17:36:18 【问题描述】:
sudo npm run serve

> frontend@1.0.0 serve /home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda
> vue-cli-service serve

 INFO  Starting development server...
12% building 20/21 modules 1 active ...rojetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/buildin/global.js/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/webpack/lib/Dependency.js:226
                throw new Error(
                ^

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
    at ProvidedDependency.set (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/webpack/lib/Dependency.js:226:9)
    at iterationDependencies (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/lib/Compilation.js:940:21)
    at factory.create (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/lib/Compilation.js:950:8)
    at factory (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:409:6)
    at hooks.afterResolve.callAsync (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:155:13)
    at _fn0 (eval at create (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:158:9)
    at that.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
    at that.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
    at CaseSensitivePathsPlugin.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:83:5)
    at that.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:106:10)
    at CaseSensitivePathsPlugin.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:51:5)
    at CaseSensitivePathsPlugin.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:89:8)
    at that.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:106:10)
    at Array.fs.readdir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:67:5)
    at Storage.finished (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/enhanced-

    resolve/lib/CachedInputFileSystem.js:55:16)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! frontend@1.0.0 serve: `vue-cli-service serve`
    npm ERR! Exit status 1
    npm ERR! 
    npm ERR! Failed at the frontend@1.0.0 serve script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /home/shinier01/.npm/_logs/2020-11-10T18_21_27_165Z-debug.log

我尝试卸载 npm、vue 和 node,我删除了 .json 文件,但不知何故没有解决,并且执行命令时总是出现此错误。

但是这个项目之前已经正常运行了,现在我给了一个 npm install 并且它更新了包,但是即使我给了一个 roolbakc,或者删除并重新安装它,也没有任何问题。

    
  "name": "frontend",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": ".....",
  "private": true,
  "scripts": 
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  ,
  "dependencies": 
    "@vue/cli": "^4.5.8",
    "@vue/cli-service": "^4.5.8",
    "axios": "^0.20.0",
    "buefy": "^0.9.3",
    "firebase": "^7.22.0",
    "vue": "^2.6.12",
    "vue-router": "^3.0.1"
  ,
  "devDependencies": 
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^6.3.0",
    "css-loader": "^5.0.1",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^4.1.1",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^5.4.0",
    "webpack-bundle-analyzer": "^4.1.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^4.1.0"
  ,
  "engines": 
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  ,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

有人可以帮我解决这个错误吗?

【问题讨论】:

您是否删除了您的 node_modules 并重试了npm i 尝试更新 html-webpack-plugin 依赖 将你的 webpack 降级到 v4,你使用的是 vue 2,所以没有办法用 webpack 5 构建它 【参考方案1】:

我遇到了同样的问题并找到了解决方案。

在我的案例中,应用程序开始使用 webpack 的 V5,它是基于 V4 构建的。您可以运行:npm i -D webpack@^4.0.0 将其反转为 V4,它应该会修复它。

特别感谢马克: https://forum.layer0.co/t/error-module-property-was-removed-from-dependency/208

【讨论】:

以上是关于vue.js - 运行我的项目时出现错误的主要内容,如果未能解决你的问题,请参考以下文章

vue.js 打包时出现空白页和路径错误

在詹金斯中运行我的硒项目时出现 Maven 错误

在 Vue.js 中找不到这些依赖项错误

npm 启动我的 Angular2 项目时出现重复的标识符导出错误

使用 xampp 运行本地项目时出现致命错误

运行php项目时出现白屏