Webpack代理+多环境打包配置(开发，测试，预生产，生产)

一：配置proxy代理

config/index.js

module.exports = {  dev: {    assetsSubDirectory: "static",    assetsPublicPath: "/",    proxyTable: {      "/web": {        // target: "http://192.168.2.666/", // 接口域名,        target: "http://192.168.2.777:81/", // 接口域名,        // target: "http://uat.baiddu.com/api/", // 预生产域名,        // target: "https://api.baidu.com/", // 接口域名,        changeOrigin: true, //是否跨域        // logLevel:'debug',        pathRewrite: {          "^/web": "/web" //须要rewrite重写的,        }      }       },      }}

二：通过corss-env,批改相干配置，build不同环境代码

1.装置
 npm install cross-env -dev--save
2.批改各环境下的参数，在 config 目录下增加 test.env.js， uat.env.js并批改dev.env.js, prod.env.js,批改后内容如下

test.env.js

'use strict'module.exports = {  NODE_ENV: '"testing"',  env_config:'"test"',  API:'"http://192.168.2.777:81/web"'}

dev.env.js

'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {  NODE_ENV: '"development"',  env_config:'"dev"',  API:'"/web"' })

uat.env.js

'use strict'module.exports = {  NODE_ENV: '"usertest"',  env_config:'"uat"',  API:'"http://uat.baidu.com/web"'}

prod.env.js

'use strict'module.exports = {  NODE_ENV: '"production"',  env_config:'"prod"',  API:'"https://api.bitdu.com/web"'}
3.批改 package.json 文件中的 scripts 内容.(NODE_ENV最好都设成 production，因为在 build/utils.js 只做了production 一种断定)
 "scripts": {    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",    "start": "npm run dev",    "lint": "eslint --ext .js,.vue src",    "build-test": "cross-env NODE_ENV=production env_config=test node build/build.js",    "build-uat": "cross-env NODE_ENV=production env_config=uat node build/build.js",    "build-prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"  },
4.批改 config/index.js 文件中 build 参数，这里的参数会在 build/webpackage.prod.conf.js 中应用到
build: {    // Template for index.html    // 增加test  prod 环境的配制    testEnv: require('./test.env'),    uatEnv: require('./uat.env'),    prodEnv: require('./prod.env'),   }
5.对 build/webpackage.prod.conf.js 文件进行批改，调整 env 常量的生成形式。
// 共性env常量的定义// const env = require('../config/prod.env')const env = config.build[process.env.env_config+'Env']
6.批改 build/build.js 文件，删除 process.env.NODE_ENV 的赋值，批改 spinner 的定义，调整后的内容如下：
'use strict'require('./check-versions')()// 正文掉的代码// process.env.NODE_ENV = 'production'const ora = require('ora')const rm = require('rimraf')const path = require('path')const chalk = require('chalk')const webpack = require('webpack')const config = require('../config')const webpackConfig = require('./webpack.prod.conf')// 批改spinner的定义// const spinner = ora('building for production...')var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )spinner.start()
7.在网络申请处，设置baseUrl
// 设置baseURLaxios.defaults.baseURL = process.env.API
8.执行打包
npm run build-test