一,现象。

当我配置了开发,测试,生产环境的时候。执行npm run testing报错。
先上package.json的配置:

  "scripts": {
    "dev": "cross-env envMode=dev webpack serve --config ./config/webpack.dev.conf.js  --color ",
    "testing": "cross-env envMode=testing webpack --config ./config/webpack.prod.conf.js  --color",
    "build": "cross-env envMode=prod webpack --config ./config/webpack.prod.conf.js  --color"
  },

在这里插入图片描述

二,原因

process.env.NODE_ENV的值已经存在,现在又重新赋值,并且赋的值和已经存在的不同。

使用webpack5之后,webpack会从配置文件的mode中自动为process.env.NODE_ENV赋值,而取的值,就是该配置文件的mode属性。如果没有值,则会默认返回“production”。
这个就是初始存在的值。

而我们要多环境配置的时候。通常会建立如下的文件:
在这里插入图片描述
使用这个插件添加变量:

 new webpack.DefinePlugin({
      // 定义环境和变量
      "process.env": {
        ...env
      },
      __VUE_OPTIONS_API__: false,
      __VUE_PROD_DEVTOOLS__: false
    }),

当我执行npm run tesing的时候。因为执行的是prod文件中的配置,其中的mode已经是production了。然后webpack会自动添加process.env.NODE_ENV=production。
然后DefinePlugin又重新给它赋值testing,两者的值不一样,所以就冲突了。(开发和生产之所以不报错,是因为正好两者的值一样不冲突)

三,解决办法

就是让webpack不会自动读取配置文件中的mode给process.env.NODE_ENV赋值。
这样process.env.NODE_ENV就只是被我们自定义的文件赋值,就不会冲突了。
解决办法就是:

module.exports={
	...//其他配置
	optimization: {
    	nodeEnv: false
  	}
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐