vue与react脚手架搭建生产、测试、开发环境在项目根目录下创建.env文件，创建三个文件vue中文件的配置开发文件.

在项目根目录下创建 .env 文件，创建三个文件

 .env.development 设置开发环境接口地址 .env.test  设置测试环境接口地址 .env.production   设置生产环境接口地址

vue中文件的配置

开发文件.env.development

NODE_ENV = 'development'
# base api
VUE_APP_BASE = 'https://zsyunjj.com/'
VUE_APP_BASE_API = 'https://zsyunjj.com/yjj/v1.4/'
VUE_APP_BASE_API2 = 'https://zsyunjj.com/yjj/v1.5/'
VUE_CLI_BABEL_TRANSPILE_MODULES = true

测试文件.env.test

NODE_ENV = 'test'
# base api
VUE_APP_BASE = 'https://zsyunjj.com/'
VUE_APP_BASE_API = 'https://zsyunjj.com/yjj/v1.4/'
VUE_APP_BASE_API2 = 'https://zsyunjj.com/yjj/v1.5/'
VUE_CLI_BABEL_TRANSPILE_MODULES = true

生产文件.env.production

NODE_ENV = 'production'
# base api

VUE_APP_BASE = 'https://yunjinji.cn/'
VUE_APP_BASE_API = 'https://yunjinji.cn/yjj/v1.4/'
VUE_APP_BASE_API2 = 'https://yunjinji.cn/yjj/v1.4/'

在package.json文件中修改

"scripts": {    "serve": "vue-cli-service serve --open --mode development",  //开发    "build": "vue-cli-service build --mode production",//生产    "lint": "vue-cli-service lint",    "abc": "vue-cli-service serve --mode abc",    "buildtest": "vue-cli-service build --mode test"//测试  },

在打包的时候根据环境不同来选择不同的路径，和axios请求（process.env可以打印出来看看）

let http = Axios.create({    baseURL: process.env.VUE_APP_BASE_API,    // baseURL:'/apis',        timeout: 10000,   //超时配置 3秒    responseType: 'json',   // 响应数据格式    responseEncoding: 'utf8',  // 响应数据编码    // headers:{    //     'token':'069d6d0bba524f4db6b5408d3f48babc'    // }});//当遇到跨域的时候使用代理的时候，也可以通过环境来判断，跨域常常是开发环境中才会出现
let http = Axios.create({    baseURL:process.env.NODE_ENV =='development'?'/api':process.env.VUE_APP_BASE_API,    timeout: 10000,   //超时配置 3秒    responseType: 'json',   // 响应数据格式    responseEncoding: 'utf8',  // 响应数据编码    // headers:{    //     'token':'069d6d0bba524f4db6b5408d3f48babc'    // }});publicPath: process.env.NODE_ENV === 'production'||process.env.NODE_ENV === 'test'?'././':'/',

vue.config.js配置

const path = require('path')const poststylus = require('poststylus')const pxtorem = require('postcss-pxtorem')const resolve = file => path.resolve(__dirname, file)// https://zsyunjj.com/yjj/v1.5/  //地图测试环境module.exports = {  publicPath: process.env.NODE_ENV === 'production'||process.env.NODE_ENV === 'test'?'././':'/',  //publicPath: '/yjj-mkt/',  outputDir:'dist', //build输出目录  assetsDir:'static', //静态资源目录    devServer: {        // https://yunjinji.cn/yjj/v1.0/        proxy: {            '/api': {                // target: 'https://zsyunjj.com/one-web-yjj/v1.0/', //对应自己的接口                target: 'https://zsyunjj.com/one-web-yjj/v1.0/', //对应自己的接口                changeOrigin: true,                ws: true,                pathRewrite: {                    '^/api': '',                }            }        }    },    // 生产环境是否生成 sourceMap 文件  productionSourceMap: false,    css: {        loaderOptions: {            stylus: {                use: [                    poststylus([                        pxtorem({                            rootValue: 75,                            propWhiteList: [],                            minPixelValue: 2                        }),                        'autoprefixer'                    ])                ],                import: [                    resolve('./src/assets/theme.custom')                ]            },            // postcss: {            //     plugins: [            //         // require("postcss-px2rem")({            //         //     remUnit: 75            //         // })            //         require('postcss-pxtorem')({            //             rootValue: 70,            //             propWhiteList: [],            //             minPixelValue: 2            //         }),            //         require('autoprefixer')({            //           overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']            //         })            //     ]            // }        }    },    transpileDependencies: [        'mand-mobile'    ],    chainWebpack: (config)=>{        //修改文件引入自定义路径        config.resolve.alias            .set('@', resolve('src'))            .set('components', resolve('src/components'))            /* 添加分析工具*/    }}

3.react文件配置

首先安装
```
npm install -g dotenv-cli
```

开发文件.env.development

NODE_ENV='development' 
REACT_APP_ROOT='/api'
REACT_APP_API='http://122.23.43.1:8080'

测试文件.env.test

NODE_ENV="test"
REACT_APP_ROOT='/apis'
REACT_APP_API='http://chenkai.com'

生产文件.env.production

NODE_ENV='production'
REACT_APP_ROOT='/api'
REACT_APP_API='http://122.223.423.111:8080'

在package.json文件中修改

"scripts": {    "start": "dotenv -e .env.development react-scripts start",//开发    "build": "dotenv -e .env.production react-scripts build",//生产    "buildtest": "dotenv -e .env.test react-scripts build",//测试    "test": "react-scripts test",    "eject": "react-scripts eject"  },