个人中心
gpt4 book ai didi

vue-cli3 热更新配置操作

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue-cli3 热更新配置操作由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

问题:

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

解决方案:

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

?
1
2
3
4
5
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热更新 。

?
1
2
3
4
5
6
7
8
9
10
11
12
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 热更新配置操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我.

原文链接：https://blog.csdn.net/weixin_39975379/article/details/87925290 。

最后此篇关于vue-cli3 热更新配置操作的文章就讲到这里了,如果你想了解更多关于vue-cli3 热更新配置操作的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： Vue+element+cookie记住密码功能的简单实现方法
文章推荐： 解决vue项目运行提示Warnings while compiling.警告的问题
文章推荐： 2021超霸气的炫酷的动漫海贼王头像合集 样子倒是还记得声音好久没听了
文章推荐： vue-cli 关闭热更新操作
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com