vue项目报错集合

vue项目报错集合

研究网页变灰色问题，以vue移动端项目为例，记录了一系列报错并解决过程，详情如下：

在尝试运行项目时，遇到了“sh: webpack-dev-server: command not found”的报错，解决方法是执行“cnpm install”命令，此操作确保了依赖包的安装，避免了后续一系列小问题的产生。

紧接着出现了“Cannot find module 'webpack-cli’”的错误，通过执行“npm install webpack-cli -g”解决，至此，确保了webpack-cli的全局安装。

随后的“Error: Cannot find module ‘webpack’”报错，通过运行“npm install --save-dev webpack”进行了解决，确保了webpack的安装与项目兼容。

“Error: Cannot find module 'webpack/bin/config-yargs’”的根源在于当前使用的webpack-dev-server版本（2.11.5）与webpack（4.42.1）存在不兼容问题，解决方法是降级webpack-dev-server至3.10.3版本，通过执行“npm i webpack-dev-server@3.10.3 -d”完成。

“TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function”的错误源于html-webpack-plugin版本与项目不兼容，解决办法是在项目中安装html-webpack-plugin，执行命令“npm i --save-dev html-webpack-plugin”或“yarn add --dev html-webpack-plugin”。

“TypeError: Cannot read property 'vue' of undefined”提示vue-loader插件出现问题，解决方法是重新安装vue-loader，执行命令“npm install vue-loader@latest --save-dev”。

遇到“Error: Cannot find module ‘html-webpack-plugin'”时，问题在于html-webpack-plugin未正确安装或配置，解决方法是重新执行“npm insatall html-webpack-plugin -d”。

“vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config”错误意味着vue-loader与配置中的插件不匹配，解决方法是确保webpack配置中包含VueLoaderPlugin，重新配置webpack。

“This dependency was not found:”提示存在未找到的依赖，解决方法是安装缺失的依赖，如sass、sass-loader，执行命令“npm i sass sass-loader --save-dev”。

遇到“Module build failed: TypeError: this.getResolve is not a function”时，问题在于sass-loader版本过高，导致编译错误，解决方法是卸载当前版本，安装指定版本7.3.1，执行命令“npm uninstall sass-loader”后，再执行“npm install sass-loader@7.3.1 --save-dev”。

最后，项目运行成功，所有问题得到妥善解决，确保了开发过程的顺畅。通过上述步骤，成功解决了在使用vue移动端项目时遇到的报错问题。2024-10-07