vue-cli3 热更新配置操作

 更新时间:2020年09月18日 15:01:57   作者:一只皮皮璐  
这篇文章主要介绍了vue-cli3 热更新配置操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

问题:

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

解决方案:

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

chainWebpack: config => {
 // 修复HMR
 config.resolve.symlinks(true);
 
},

是的就是这么简单。

修改一下标签里面的内容,ok可以自动更新。开森!!!

好像有点开心的太早,修改css部分的内容并没有自动更新,原来的vue.config.js中的css配置搞的鬼。在css 的相关配置中多了extract:true的这一条配置,注释掉之后就可以自动更新。

题外话:

vue-cli升级到3之后,减少了很多的配置文件,将所有的配置项都浓缩到了vue.config.js这个文件中,所以学懂并会用vue.config.js文件很重要,很重要,很重要。重要的句子要加粗。

补充知识: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 热更新配置操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue的computed计算属性你了解吗

    Vue的computed计算属性你了解吗

    这篇文章主要为大家详细介绍了Vue的computed计算属性,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 关于vant折叠面板默认展开问题

    关于vant折叠面板默认展开问题

    这篇文章主要介绍了关于vant折叠面板默认展开问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue实现动态圆环百分比进度条

    Vue实现动态圆环百分比进度条

    这篇文章主要为大家详细介绍了Vue实现动态圆环百分比进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue3.0组件通信mitt源码ts实例解析

    Vue3.0组件通信mitt源码ts实例解析

    这篇文章主要为大家介绍了Vue3.0组件通信mitt源码ts实例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Vue在H5 项目中使用融云进行实时个人单聊通讯

    Vue在H5 项目中使用融云进行实时个人单聊通讯

    这篇文章主要介绍了Vue在H5 项目中使用融云进行实时个人单聊通讯,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • Vuex中状态管理器的使用详解

    Vuex中状态管理器的使用详解

    这篇文章主要介绍了Vuex状态管理器的使用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • VUE元素的隐藏和显示(v-show指令)

    VUE元素的隐藏和显示(v-show指令)

    本篇文章主要介绍了VUE元素的隐藏和显示(v-show指令),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 解决Vue 浏览器后退无法触发beforeRouteLeave的问题

    解决Vue 浏览器后退无法触发beforeRouteLeave的问题

    这篇文章主要介绍了解决Vue 浏览器后退无法触发beforeRouteLeave的问题,需要的朋友可以参考下
    2017-12-12
  • Vue3的10种组件通信方式总结

    Vue3的10种组件通信方式总结

    组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,这篇文章主要给大家介绍了关于Vue3的10种组件通信方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • vue父组件中获取子组件中的数据(实例讲解)

    vue父组件中获取子组件中的数据(实例讲解)

    下面小编就为大家带来一篇vue父组件中获取子组件中的数据(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论