vue-cli3 热更新配置操作


Posted in Javascript onSeptember 18, 2020

问题:

在使用vue-cli3搭建项目之后,发现修改.vue文件里面的内容之后,页面不会自动刷新。

解决方案:

只需要在vue.config.js文件中配置一下就可以实现热更新了,如下:

chainWebpack: config => {
 // 修复HMR
 config.resolve.symlinks(true);
 
},

是的就是这么简单。

修改一下标签里面的内容,ok可以自动更新。开森!!!

好像有点开心的太早,修改css部分的内容并没有自动更新,原来的vue.config.js中的css配置搞的鬼。在css 的相关配置中多了extract:true的这一条配置,注释掉之后就可以自动更新。

vue-cli3 热更新配置操作

题外话:

vue-cli升级到3之后,减少了很多的配置文件,将所有的配置项都浓缩到了vue.config.js这个文件中,所以学懂并会用vue.config.js文件很重要,很重要,很重要。重要的句子要加粗。

补充知识:vue-cli3热更新配置,解决热更新失败的问题,保存代码浏览器自动刷新

vue-cli3 热更新配置操作

在vue,config.js中配置css热更新

const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV)
 css: {
 // 是否使用css分离插件 ExtractTextPlugin
 extract: IS_PROD,
 // 开启 CSS source maps?
 sourceMap: false,
 // css预设器配置项
 loaderOptions: {
 },
 // 启用 CSS modules for all css / pre-processor files.
 modules: false,
 },

然后npm run serve 重启项目即可

以上这篇vue-cli3 热更新配置操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 继承机制的实现(待续)
May 18 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
vue-cli 关闭热更新操作
Sep 18 #Javascript
Node.JS如何实现JWT原理
Sep 18 #Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 #Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 #Javascript
js实现手表表盘时钟与圆周运动
Sep 18 #Javascript
javascript实现智能手环时间显示
Sep 18 #Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 #Javascript
You might like
PHP+DBM的同学录程序(2)
2006/10/09 PHP
用PHP+MySql编写聊天室
2006/10/09 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
django在开发中取消外键约束的实现
2020/05/20 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
文明教师事迹材料
2014/01/16 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
禁止酒驾标语
2014/06/25 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA