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

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

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

相关阅读

相关热更新

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

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

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

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

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

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

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

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

相关 3 热更新失效_浅谈一下失效分析

以IGBT、MOSFET为主的电力电子器件通常具有十分广泛的应用，但广泛的应用场景也意味着可能会出现各种各样令人头疼的失效情况，进而导致机械设备发生故障！ ![999586b

骑猪看日落/ 2023年01月06日 01:36/ 0 赞/ 140 阅读

相关 Bugly实现APP热更新

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

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

相关 Bugly实现APP热更新

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

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

相关 CocosCreator热更新1.4.0

转自：https://github.com/pandamicro/creator-docs/blob/v1.4/source/zh/advanced-topics/asset

一时失言乱红尘/ 2022年06月18日 11:16/ 0 赞/ 201 阅读

相关热更新

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

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

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

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

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

相关 webstorm 不能热更新

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

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