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 学习笔记 选择器之三
Jul 23 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
浅析vue数据绑定
Jan 17 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
Vue异步加载about组件
Oct 31 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
详细分析React 表单与事件
Jul 08 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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
php获取地址栏信息的代码
2008/10/08 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
List Installed Software Features
2007/06/11 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python中lambda()的用法
2017/11/16 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
新文化运动的基本口号
2014/06/21 职场文书
2015年考研复习计划
2015/01/19 职场文书
工作证明格式范文
2015/06/15 职场文书
导游词之张家口
2019/12/13 职场文书