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 相关文章推荐
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 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的配置文件php.ini
2006/10/09 PHP
PHP4实际应用经验篇(1)
2006/10/09 PHP
php计算整个目录大小的方法
2015/06/01 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
非常好的js代码
2006/06/27 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
微信小程序选择图片控件
2021/01/19 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python中操作符重载用法分析
2016/04/29 Python
django定期执行任务(实例讲解)
2017/11/03 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python web框架 django wsgi原理解析
2019/08/20 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
毕业设计计划书
2014/01/09 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
品质口号大全
2014/06/17 职场文书
画展邀请函
2015/01/31 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python