vue-cli@4及以上版本中关于热更新失效的解决方法

你的心上进
3,461 阅读3分钟

题引：

今天要开发一个新的项目，用的是 vue3.2+vue-cli5 的版本。弄完项目的整体架构之后就正常实现功能，突然发现热更新失效了，每一次都得重新刷新页面才会变动。查了相关的文档，就确定了有几个问题可能导致热更新失效，希望能够帮大家排雷。

方法：

根据webpack的相关文档提示：webpack4之后的热更新只需要在配置文件中开启 hot:true 即可实现热更新,不再需要借助 HotMOduleREplacementPLugin 插件。 image.png

因此我们可以通过简单的配置来实现热更新

//vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  //...
  devServer: {
    hot: true,
  },
});

也可以通过 cli option 命令方式来实现

//package.json
"scriots":{
    "serve":"vue-cli-service serve --hot",
    "build":"vue-cli-service build"
}

有些时候我们会发现这样配置就可以达到热更新的效果，但是有些人却不可以。主要的原因是因为 process.env.NODE_ENV 和 vue-cli mode 不一致。

在vue-cli脚手架的mode中有三种情况：development、test、production，且默认的mode=development。在我们使用脚手架的时候，很少的人会去配置NODE_ENV这个配置，或者是建立在别人构建好的情况下使用。因此我们需要了解一下 NODE_ENV 和 mode 的关系。

首先，NODE_ENV是一个环境变量，就像我们安装node的时候都需要进行环境配置。这个变量主要用于标识当前的环境（生产环境，开发环境）。默认是没有这个环境变量的，需要自己手动配置。不同系统有不同的环境变量配置方式。

接下来是关于mode，这是官方的一个解释图：

image.png

也就是说，一个mode里面可以有多个NODE_ENV，且也会把NODE_ENV的值设置为mode的名称。那么在vue中我们可以通过在根目录创建 .env.[node] 或者 .env 文件来配置。当我们运行vue-cli指令的时候，就会将该模式下的NODE_ENV载入其中。

npm run dev(serve)，其实是运行了 vue-cli service serve，默认模式是development，可以在.env.development文件下修改模式对应的NODE_ENV
npm run build，其实运行的是 vue-cli service serve，默认模式是production，可以在.env.production文件修改对应模式的NODE_ENV

当然，我们除了通过.env文件来实现mode和NODE_ENV一致之外，也可以通过 cross-env 这个包来实现。

cross-env

  • 什么是cross-env呢？
    它是运行跨平台设置和使用环境变量的脚本。
  • 它的作用是啥？
    大多数windows命令会提示将会阻塞或者异常，或者windows不支持NODE_ENV=development的这样的设置方式，会报错。因此cross-env出现了。我们可以使用cross-env命令来实现全开发平台的兼容。
    要使用该命令的话，我们首先需要在我们的项目中安装该命令：

    npm install --save-dev cross-env

安装之后，我们就可以在package.json里面进行配置

"scripts":{
    "serve": "cross-env NODE_ENV=development vue-cli-service serve --mode development --hot",
    "build": "cross-env NODE_ENV=production vue-cli-service build --mode production"
}

结尾：

以上就是解决热更新失效的问题。

avatar
文章
阅读
粉丝