Vue多环境打包配置实战：基于cross-env与Webpack的完整指南

Vue多环境打包配置实战：基于cross-env与Webpack的完整指南

在最近的一个项目中，我们需要同时支持正式环境、测试环境和开发环境三种不同的运行场景。为了清晰展示配置流程，本文将以此为例进行详细说明。

安装cross-env依赖

首先，需要安装cross-env工具，以便在不同操作系统下统一设置环境变量。

npm i --save-dev cross-env 

或者在

package.json文件中添加"cross-env": "^5.0.1"依赖项来完成安装。

package.json:

//这是我项目的目录

配置各环境参数文件

接下来，需要修改各个环境下的具体参数配置。

在config目录下新建test.env.js和develop.env.js文件，并相应地修改这些文件中的内容。

config/prod.env.js

config/develop.env.js

修改Webpack构建配置

第三步，需要调整build文件夹中的相关配置。

1. 在build文件夹下新增环境配置文件webpack.develop.conf.js。

2. 修改build.js文件。

默认情况下打包的是prod环境，此处将其修改为默认打包测试环境。

打印当前所处的环境信息。

3. 修改webpack.prod.conf.js文件。

4. 修改webpack.base.conf.js文件。

由于config/index.js中配置了不同环境对应的静态文件目录，因此需要根据当前环境加载不同的配置。如果各环境配置一致，则无需进行区分处理。

config/index.js

config/index.js dev运行

config/index.js 开发环境配置

config/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 env_config=develop node build/build.js"

测试环境打包： npm run build--test

正式环境打包： npm run build--prod

开发环境打包： npm run build--develop

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