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 相关文章推荐
JS与框架页的操作代码
Jan 17 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
Javascript进制转换实例分析
May 14 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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.MVC的模板标签系统(二)
2006/09/05 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
使用php计算排列组合的方法
2013/11/13 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python 条件判断的缩写方法
2008/09/06 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
python pip如何手动安装二进制包
2020/09/30 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
建筑设计所实习生自我鉴定
2013/09/25 职场文书
考试退步检讨书
2014/01/15 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
排查整治工作方案
2014/06/09 职场文书
授权委托书格式
2014/07/31 职场文书
2019各种保证书范文
2019/06/24 职场文书