在项目开发的不同阶段网络请求的baseUrl一般都是不同的，例如在我写按摩椅项目的时候，有dev环境，test环境，最后才是生产环境。因为是移动端项目涉及到微信和支付宝的支付，所以必须要有测试环境，先测试没有问题了然后再部署到正式环境上，那么这两个不同的baseUrl怎么切换呢？这就是下文要讲的。
常规的做法是设置一个常量，根据不同的常量值，进入不同的if语句中，如下：
//常规的做法 let mode="dev"; //可以设置：dev、test、prod let baseUrl=""; if(mode=="dev"){ baseUrl=="http://api.xmdev.com"; }else if(mode=="test"){ baseUrl=="http://api.xmtest.com"; }else { baseUrl=="http://api.xmprod.com"; } export { baseUrl }
这种做法基本需求是实现了，但是如果有一天老大突然说，我们这个项目要开始做持续集成，代码在本地跑成功没有bug以后，上传源码到服务器通过执行脚本直接编译打包，然后通过nginx指向编译后的index.html文件部署就ok了。这个时候上面的这种常规做法显然就行不通了。
这里我介绍一个第三方库来实现上面的需求：cross-env
cross-env官方的介绍是：跨平台环境脚本的设置，你可以通过一个简单的命令（设置环境变量）而不用担心设置或者使用环境变量的平台。
话不多说，根据上面的需求来看看这里应该怎么实现，目前我们有三个环境：开发、测试、正式。根据不同环境配置不同的地址。下面是具体的使用步骤
npm install --save-dev cross-env
‘use strict‘; module.exports = { NODE_ENV: ‘"testing"‘, ENV_CONFIG:‘"test"‘ };
‘use strict‘; module.exports = { NODE_ENV: ‘"production"‘, ENV_CONFIG:‘"prod"‘ };
// const env = require(‘../config/prod.env‘) const env = config.build[process.env.env_config+‘Env‘];
build: { //添加下面两行代码 prodEnv: require(‘./prod.env‘), testEnv: require(‘./test.env‘), // Template for index.html index: path.resolve(__dirname, ‘../dist/index.html‘), // Paths assetsRoot: path.resolve(__dirname, ‘../dist‘), assetsSubDirectory: ‘static‘, assetsPublicPath: ‘/‘, ................... }
// const spinner = ora(‘building for production...‘) var spinner = ora(‘building for ‘ + process.env.NODE_ENV + ‘ of ‘ + process.env.env_config+ ‘ mode...‘ );
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js", "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js", // npm run build--test 测试环境打包 "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js" // npm run build--prod //生产环境打包 },
if (process.env.NODE_ENV == ‘development‘) { baseUrl = "http://api.xmdev.com"; } else if (process.env.NODE_ENV == ‘production‘) { baseUrl = "http://api.xmprod.com"; } else if (process.env.NODE_ENV == ‘testing‘) { baseUrl = "http://api.xmtest.com"; }
开发环境直接在本地 run dev 很容易看到效果。
测试环境和正式环境，需要在本地启一个tomcat服务，如何在本地启动tomcat服务这里就不叙述了。
执行 “npm run build--test"以后将编译好的文件放到tomcat的webapp/ROOT目录下就行了。
再执行“npm run build--prod"以后将编译后的文件放到webapp/ROOT下面，就可以看到下面api了。 再正式开发的过程中，baseUrl往往是被引入网络封装库中。
项目已经上传到github上，有需要的同学可以下载下来瞅瞅：CrossEnvDemo
有时候，正式环境的地址是：http://www.xmtech.com。在弄测试环境的时候为了简化，后端同学就直接用nginx做一个重定向，然后就有了测试环境地址:http://www.xmtech.com/test/index.html。 在这个时候webpack的配置文件中，就要根据具体情况作出修改，否则部署以后页面就会空白，因为编译后的资源文件找不到了
在webpack.base.conf.js文件中，要根据具体情况作出修改。
let assetPublicPath; if (process.env.env_config == ‘test‘) { assetPublicPath=‘/test/‘ }else if(process.env.env_config == ‘prod‘){ assetPublicPath=config.build.assetsPublicPath; }else{ assetPublicPath=config.dev.assetsPublicPath; }
原文：https://www.cnblogs.com/dashwood/p/11624456.html