【疑难杂症】vue-cli热更新失效

疑难杂症 专栏收录该内容
2 篇文章 0 订阅

前情提要

公司又双叒要搭建新的前端项目,以前用vue-cli3.0,所以这次就是用vue-cli4来搭建一下玩玩。

结果玩不好,vue-cli搭建的vue项目,部分热更新失败。主要体现在:1..vue文件的修改,可以实现热更新;2.在main.js等引入的文件,无法实现热更新。

过程

私以为是vue-cli版本不同导致的,所以在找度娘的过程中,也指定了是vue-cli4

结果试过很多方法:

1.配置vue.config.js,几个关键的属性也都开了

devServer: {
    hot: true,
    hotOnly: true,
    inline: true
}

chainWebpack: (config) => {
    config.resolve.symlinks(true);
}

2.使用webpack-dev-server

npm/cnpm i -D webpack-dev-server

// 执行命令
"serve": "cross-env NODE_ENV=dev vue-cli-service serve && webpack-dev-server --hot-only"

但依然是全局文件热更新失效

经过几番周折,决定静下心去看webpack4.0的官方文档

原来是需要HotModuleReplacementPlugin配合使用,但文档也说了,如果是通过--hot启动,会自动添加

唉,那么我就用 vue-cli HotModuleReplacementPlugin 试着去百度(重点来了)

然后看到了这位博主的vue-cli hot-module-replacement不生效,不自动更新文章,真一语点醒傻子般的我梦中人

解决

新项目和以前的项目的不同点在于,还没有新建环境配置文件(后续也许也不会直接在根目录下创建环境配置文件,因为环境太多了)

也就是说,没有.env.development文件的,NODE_ENV变量是使用cross-env去设置的

原来的命令如下

"serve": "cross-env NODE_ENV=dev vue-cli-service serve"

指定了NODE_ENV的值为dev,但vue-cli-service命令没有指定mode为dev(mode值默认为development),所以部分热更新失败

只要把命令修改为:

"serve": "cross-env NODE_ENV=dev vue-cli-service serve --mode dev"

热更新就奏效了。

还有最简单的,就是把NODE_ENV设置为development。

造成部分热更新失效的原因,我猜测是在vue-cli脚手架对热更新的配置中,process.env.NODE_ENVmode的值是有关系的。

vue-cli的mode在serve命令中,默认是"development",而如果不显式配置NODE_ENV的值,估计是null(不敢断定,还没去验证)

所以总结:

NODE_ENV和vue-cli的mode值要一一匹配!

后续:vue-cli-service的源码看了部分,感觉不是一时半刻能理解并且证实上面的猜测,所以先去搬砖,希望后续有时间能验证吧

 

  • 1
    点赞
  • 2
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值