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

旧城等待， 2023-07-24 03:13 187阅读 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 条评论，187人围观）

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

相关阅读

相关 Oracle索引失效：更新维护不及时

在Oracle数据库中，索引是优化查询性能的重要工具。当出现“Oracle索引失效：更新维护不及时”这种情况时，通常有以下原因： 1. 索引重建：在执行数据更改操作后，如插入

电玩女神/ 2025年01月31日 21:36/ 0 赞/ 83 阅读

相关 Oracle索引失效：更新不及时

在Oracle数据库中，如果索引失效，可能是因为以下原因： 1. **更新不及时**：当你对包含索引的表进行修改（如插入、更新或删除记录）时，如果没有及时提交事务或者进行了回

女爷i/ 2025年01月08日 10:00/ 0 赞/ 88 阅读

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

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

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

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

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

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

相关 uni-app热更新

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

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

相关 Bugly实现APP热更新

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

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

相关 Bugly实现APP热更新

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

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

相关热更新

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

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

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

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

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

相关 webstorm 不能热更新

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

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