最近在做vue的实例项目的时候,遇到用webpack来打包项目的时候,出现了一些版本的兼容性冲突问题,导致运行报错,出现的结果和解决办法如下,在此记录一下:

        错误1:TypeErroethis.getOptions is not a function

        原因:安装的less-loader版本太高导致冲突问题产生

        解决办法:降低版本号

        卸载原本的版本:npm uninstall less-loader

        重新安装低版本:npm install less-loader@x.x.x (x.x.x 表示需要安装特定的版本号)

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

        原因:由于webpack4以上的版本变动较大,与之前的是有所差距的,所以如果是采用vue3创建的vue项目,用webpack4的版本更能互相的兼容,如果采用webpack5的版本的话,则会出现以上报错

        解决办法:降低版本号

        卸载原本的版本:由于可能不知道我们自己之前安装的webpack是全局安装还是局部安装,所以可以把下面的两句命令都执行一遍

        在创建项目的根路径执行

        全局:npm uninstall -g webpack

        局部:npm un webpack

        重新安装低版本:nnpm install --save-dev webpack@x.x.x (x.x.x 表示需要安装特定的版本号)

        补充:由于webpack的版本需要webpack-cli一起配合使用的,所以也要把他安装一下,运行一下

npm install --save-dev webpack-cli就行

        查看安装后的版本号:node_modules/.bin/webpack -v

教训:在安装webpack和less-loader时,切记勿直接安装最新版本,要看项目所用的vue版本等等

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐