GitLab

邻小汇热更新失败（开发环境更新文案会导致整个页面刷新）

原因

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV); // 需要前置，防止被 dotenv 影响；取值来自 build/dev-server.js 和 build/build.js 中设置

// const projectPathRoot = process.cwd();
const dotenv = require('dotenv');
dotenv.config({ path: `.env.${process.env.npm_config_env}` }); // 这里会覆盖 NODE_ENV，但是在 build/dev-server.js 中进行了恢复

dotenv 引入的 .env.te 中的 NODE_ENV 应用到了开发环境，导致原来的 process.env.NODE_ENV development 变成了 production，导致热更新插件判断为生产环境，所以不进行热更新

NODE_ENV=production
NODE_TYPE=te

解决方案

在 dotenv 引用之后重新赋予 process.env.NODE_ENV 正确的值，目前是和邻汇吧后台一样，在 build/dev-server.js 中设置，因为该文件只会在开发脚本中被执行： "start": "node --max-old-space-size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/dev-server.js",

build/dev-server.js

'use strict';

process.env.NODE_ENV = 'development'; // 指定编译环境为 development/production（依赖包内只判断这两个值）

// ...

也可以在 dotenv 之后通过 IS_PROD 重新设置：

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV); // 需要前置，防止被 dotenv 影响；取值来自 build/dev-server.js 和 build/build.js 中设置

// const projectPathRoot = process.cwd();
const dotenv = require('dotenv');
dotenv.config({ path: `.env.${process.env.npm_config_env}` }); // 这里会覆盖 NODE_ENV，但是在 build/dev-server.js 中进行了恢复

process.env.NODE_ENV = IS_PROD ? 'production' : 'development';