最近的一个项目配置了三个环境：正式环境、测试环境和开发环境。以此为例

步骤1:安装交叉环境

NPM I-保存-开发跨环境或在

将“cross-env”:“5 . 0 . 1”添加到package.json以获得安装相关性

package . js :

//这是我的项目目录

步骤2:修改每个环境中的参数

在config/目录中添加test.env.js和develop.env.js。并修改文件的内容

配置/产品. env.js

config/developer . env . js

步骤3:更改构建文件夹的内容

1.将环境文件web pack . developer . conf . js添加到构建文件夹中

2.修改build.js

默认的打包是产品环境，默认情况下，我将其更改为测试环境

什么是打印环境

3.修改webpack.prod.conf.js

4.修改webpack.base.conf.js

因为config/index.js配置的环境不同，静态文件是从不同的目录获取的，所以要根据不同的环境拿出不同的配置。如果配置相同，则无需区分它们

config/index.js

运行config/index.jsdev。

config/index.js开发环境配置

配置/index.js测试环境配置

Config/index.js正式环境配置

第四步：进入不同的命令打包环境

Build-test ' : ' cross-ENV NODE _ ENV=testing ENV _ config=test NODE Build/Build . js '，' Build-prod ' : ' cross-ENV NODE _ ENV=production ENV _ config=prod NODE Build/Build . js '，Build-develop ' : ' cross-ENV NODE _ ENV=develop NODE Build/Build . js '测试环境打包：npm run build - test

正式环境的打包：npm运行构建产品

开发环境包：npm运行构建-开发

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。