前端 cross-env 实现vue项目多环境打包

最新推荐文章于 2026-06-07 14:45:57 发布

原创最新推荐文章于 2026-06-07 14:45:57 发布 · 1.5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #前端 #webpack

本文详细介绍如何在Vue项目中配置多环境，包括测试环境和生产环境。通过npm安装cross-env模块，修改package.json和config文件，实现不同环境变量的切换，确保API请求地址正确，便于开发和部署。

前言

以下是自己在项目中配置的流程步骤

1. npm安装cross-env模块

cnpm i --save-dev cross-env

2. package.json文件中scripts添加如下

"build:test": "rimraf dist && cross-env NODE_ENV=testing ENV_CONFIG=test node build/build.js",
"build:prod": "rimraf dist && cross-env NODE_ENV=production ENV_CONFIG=prod node build/build.js"

3. config/prod.env.js文件更改如下（该文件vue-cli项目会默认生成）

NODE_ENV: '"production"',		// 对应package.json文件中build:prod的NODE_ENV的值
ENV_CONFIG: '"prod"',			//对应package.json文件中build:prod的ENV_CONFIG的值
BASE_URL: '"生产环境接口"'

4. config/test.env.js文件下添加如下（需要新建，该目录用来配置测试环境配置）

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',		// 对应package.json文件中build:test的NODE_ENV的值
  ENV_CONFIG: '"test"',			//对应package.json文件中build:test的ENV_CONFIG的值
  BASE_URL: '"测试环境接口地址"'
})

5. build/webpack.prod.config.js文件下添加（该文件有定义env，删除原本的，换成如下）

const env = require('../config/' + process.env.env_config + '.env')

6. 项目中的API请求地址使用process.env.BASE_URL引用，也就是config文件中定义的BASE_URL属性，类似如下

axios.defaults.baseURL = process.env.BASE_URL;

7. 命令行打包不同环境的包版本
测试环境包

npm run build:test

生产环境包

npm run build:prod

Tips: 如果在项目代码中需要针对打包环境做不同的逻辑处理，可以通过process.env.NODE_ENV来做判断