vue-cli4热更新失效解决

Ali_code

于 2021-09-15 22:33:58 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript node.js

本文链接：https://blog.youkuaiyun.com/Ali_code/article/details/120318590

本文详细指导如何在vue-cli4项目中配置热更新，包括安装webpack-dev-server、vue.config.js的devServer设置、package.json的script命令，以及重启步骤，确保热更新功能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决以上报错导致热更新不生效,不要手动修改node_modules文件里的东西!!!!!!!!!!!

vue-cli4热更新配置
一，安装依赖webpack-dev-server
根据自己的情况安装npm / cnpm
npm install --save-dev webpack-dev-server / cnpm install --save-dev webpack-dev-server
二，配置vue.config.js文件
由于vue-cli4文件夹和之前有很大的出入所以要在vue.config.js配置相关参数，增加devServer的配置

devServer: {
		compress: true, //代码压缩
		disableHostCheck: true, //webpack4.0 开启热更新
	}

位置如下图展示

三，配置package.json文件
在package.json中的scripts对象添加命令，开启本地服务

"serve": "vue-cli-service serve && webpack-dev-server --open"

位置如下图展示

四，重启
最后执行npm run server然后重新进行打包，热更新失效问题解决