vue-cli3+webpack热更新失效问题

简介: A项目中遇到问题,热更新失效,百思不得其解,查询搜索vuecli3热更新失效、vue histroy 模式热更新失效,网上看到不少方法,npm重新安装,不要用淘宝镜像cnpm安装;npm安装yarn,再用yarn重新install,yarn serve启动,在npm run serve 启动等方法都不好用。github有类似问题3.0.0-beta.16 热更新失效 · Issue #1559 · vuejs/vue-cli · GitHub,有次得到启发可能版本不同导致。对比热更新正常的项目B的几个配置文件,重点查看package.json文件,发现有webpack版本不同。

1、起因


A项目中遇到问题,热更新失效,百思不得其解,查询搜索vuecli3热更新失效、vue histroy 模式热更新失效,网上看到不少方法,npm重新安装,不要用淘宝镜像cnpm安装;npm安装yarn,再用yarn重新install,yarn serve启动,在npm run serve 启动等方法都不好用。github有类似问题3.0.0-beta.16 热更新失效 · Issue #1559 · vuejs/vue-cli · GitHub,有次得到启发可能版本不同导致。


对比热更新正常的项目B的几个配置文件,重点查看package.json文件,发现有webpack版本不同。

e3d1be3d5437559e366d1f5fd52f9e9.png

2、解决方案


初步断定是webpack版本原因,搜索关键词就变成了webpack4.0热更新失效,webpack4.0热更新开启,由此查询查询尝试。原因大概是webpack4.0需要手动配置开启热更新,默认没有开启


2.1、局部安装依赖webpack-dev-server


npm install --save-dev webpack-dev-server

2.2、在webpack.config.js配置相关参数


增加devServer的配置

const path = require('path');
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'youname.js'
    },
    plugins: [
    ],
    devServer: {
        contentBase: path.join(__dirname, 'page'),
        compress: true,
        port: 8080
    }
};


2.3、在package.json中的scripts对象添加命令,开启本地服务


"server": "webpack-dev-server --open"

如果server有其他命令执行,在后面增加这一句命令就可以了

5dd6c69ec70c715321ef0d0a5c1e08b.png

2.4、vue.config.js配置,开启热更新


 devServer: {
        disableHostCheck: true,//webpack4.0 开启热更新
 }

336c205d09cb31c04e3155355acc72d.png

2.5、最后执行npm run server即可,热更新失效问题解决


目录
相关文章
|
5月前
|
API 开发工具 开发者
webpack热更新原理
Webpack的Hot Module Replacement(HMR)提升开发效率,无需刷新页面即可更新模块。开启HMR需在配置中设`devServer.hot: true`。Webpack构建时插入HMR Runtime,通过WebSocket监听并处理文件变化。当模块改变,Webpack发送更新到浏览器,HMR Runtime找到对应模块进行热替换,保持应用状态。开发者可利用`module.hot` API处理热替换逻辑。
|
5月前
|
前端开发 测试技术 开发者
深入理解 Webpack 热更新原理:提升开发效率的关键
深入理解 Webpack 热更新原理:提升开发效率的关键
|
5月前
|
自然语言处理 JavaScript 前端开发
webpack 的热更新是如何做到的?原理是什么?
webpack 的热更新是如何做到的?原理是什么?
79 0
|
5月前
|
前端开发 JavaScript 算法
面试官:【webpack和vite的区别?vite一定比webpack快吗?vite的缺点是什么?webpack的热更新和vite的热更新区别?】
面试官:【webpack和vite的区别?vite一定比webpack快吗?vite的缺点是什么?webpack的热更新和vite的热更新区别?】
1179 0
|
资源调度 前端开发 JavaScript
配置多入口 Webpack 热更新失效? #120
配置多入口 Webpack 热更新失效? #120
173 0
|
移动开发 前端开发 JavaScript
Webpack 如何配置热更新 #96
Webpack 如何配置热更新 #96
244 0
|
前端开发
【前端】解决 webpack5 热更新时间太长的问题
【前端】解决 webpack5 热更新时间太长的问题
600 0
Webpack插件使用及热更新打包
Webpack插件使用及热更新打包
125 0
|
JavaScript 前端开发 开发者
基于webpack的热重载live reload和热更新HMR(中)
在前端应用框架中不管是react还是vue,官方都提供了相应的脚手架方便开发者快速入手,当我们在开发时修改某个js或者css文件时,webpack会自动编译我们的文件,我们刷新浏览器就可以看到编译后的文件。为此我们会想,如果我们修改保存之后,文件被编译、浏览器自动刷新、或者浏览器局部刷新(不刷新整个浏览器),这样的话多好。当然,基于webpack打包工具的相关库已经实现了。下面对此部分流程做简单的分析
|
缓存 前端开发 JavaScript
基于webpack的热重载live reload和热更新HMR(下)
在前端应用框架中不管是react还是vue,官方都提供了相应的脚手架方便开发者快速入手,当我们在开发时修改某个js或者css文件时,webpack会自动编译我们的文件,我们刷新浏览器就可以看到编译后的文件。为此我们会想,如果我们修改保存之后,文件被编译、浏览器自动刷新、或者浏览器局部刷新(不刷新整个浏览器),这样的话多好。当然,基于webpack打包工具的相关库已经实现了。下面对此部分流程做简单的分析