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

最新推荐文章于 2023-11-24 10:26:54 发布

foo_ooooool

最新推荐文章于 2023-11-24 10:26:54 发布

阅读量9k

点赞数 8

分类专栏：疑难杂症文章标签： vue webpack 前端

本文链接：https://blog.csdn.net/onionlsh/article/details/115241892

版权

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_ENV和mode的值是有关系的。

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

所以总结：

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

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

关注