vue-cli4 APP热更新失效不可以及时更新

旧城等待， 2023-07-24 03:13 122阅读 0赞

**前言**  
项目中遇到问题，热更新失效，不能每次及时提醒，百度了很多方法，效果不是狠显著，后来发现webpack4.0需要手动配置开启热更新，默认没有开启  
**解决办法**  
**一，安装依赖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 开启热更新
    	}

位置如下图展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70]  
**三，配置package.json文件**  
在package.json中的scripts对象添加命令，开启本地服务

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

位置如下图展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70 1]  
**四，重启**  
最后执行npm run server然后重新进行打包，热更新失效问题解决

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70]: /images/20230528/815a431e15b34dffa4b59e58156f4fbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70 1]: /images/20230528/a268b58aa7294916be23daefef3c4111.png

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关热更新

单来说我的理解就是:当你的文件发现改变的时候页面自己就更新了。不用你再手动刷新页面。无刷新更新常见的需求如赛事网页推送比赛结果、网页实时展示投票或点赞数据、在线评论或...

雨点打透心脏的1/2处/ 2024年04月17日 05:25/ 0 赞/ 134 阅读

相关热更新

介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面 1.当修改了一个或多个文件； 2.文件系统接收更改并通知webpack； 3.we

妖狐艹你老母/ 2023年10月12日 08:12/ 0 赞/ 50 阅读

相关 vue-cli4 APP热更新失效不可以及时更新

前言项目中遇到问题，热更新失效，不能每次及时提醒，百度了很多方法，效果不是狠显著，后来发现webpack4.0需要手动配置开启热更新，默认没有开启解决办法一，

旧城等待，/ 2023年07月24日 03:13/ 0 赞/ 123 阅读

相关 Lua语言为什么可以热更新

一、什么是热更新热更新是一种各大手游等众多App常用的更新方式。简单来说，就是在用户通下载安装APP之后，打开App时遇到的即时更新。二、热更新的本质热更新

待我称王封你为后i/ 2023年03月13日 15:23/ 0 赞/ 154 阅读

相关 uni-app热更新

可前往此处公众号查看 https://mp.weixin.qq.com/mp/profile\_ext?action=home&\_\_biz=Mzg3NTAzMzAxNA==

r囧r小猫/ 2023年02月17日 11:04/ 0 赞/ 8 阅读

相关 Bugly实现APP热更新

Bugly实现APP热更新 Bugly实现热修复采用的是微信[Tinker][]技术。对Tinker进行了简化封装。 [Bugly热修复官方文档][Bugly] 一

港控/mmm°/ 2022年07月12日 02:23/ 0 赞/ 274 阅读

相关 Bugly实现APP热更新

Bugly实现APP热更新 Bugly实现热修复采用的是微信[Tinker][]技术。对Tinker进行了简化封装。 [Bugly热修复官方文档][Bugly] 一

蔚落/ 2022年07月12日 02:23/ 0 赞/ 313 阅读

相关热更新

虽然有插件开发，但热更新少不了。 ![Center][] 当我们需要更新插件的时候使用的是插件开发，当我们需要更新宿主程序就需要使用热更新热更新使用框架bsdif

柔情只为你懂/ 2022年06月10日 23:40/ 0 赞/ 475 阅读

相关使用vuecli3配置vux2热更新的问题

首先贴一下解决的代码 ![70][] 需要注意的是，我之前baseUrl都配错了，刷新的报错 “<”的错误，其实就是路径的问题，刷新后找不到文件上次用vuecli

绝地灬酷狼/ 2022年05月14日 06:26/ 0 赞/ 355 阅读

相关 webstorm 不能热更新

1.打开webstorm设置选项 ---- file --> settings ![clipboard.png][] -------------------- 2.

待我称王封你为后i/ 2022年03月07日 03:40/ 0 赞/ 899 阅读