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 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
vue通过过滤器实现数据格式化
Jul 20 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发送邮件类代码附详细说明
2008/07/10 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
php之curl设置超时实例
2014/11/03 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
python登录豆瓣并发帖的方法
2015/07/08 Python
numpy中的高维数组转置实例
2018/04/17 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
大学生思想汇报范文
2013/12/31 职场文书
社团活动策划书范文
2014/01/09 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
电影开国大典观后感
2015/06/04 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
小学班主任教育随笔
2015/08/15 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js