第1步:安装cross-env
1 | npm i --save-dev cross-env |
第2步:修改各环境下的参数
在config/目录下添加test.env.js、pre.env.js。
修改prod.env.js里的内容,修改后的内容如下:
1 2 3 4 5 6 | 'use strict' module.exports = { NODE_ENV: '"production"' , EVN_CONFIG: '"prod"' , API_ROOT: '"/apis/v1"' } |
分别对test.env.js和pre.env.js文件内容进修修改,修改后的内容如下:
1 2 3 4 5 6 | 'use strict' module.exports = { NODE_ENV: '"testing"' , EVN_CONFIG: '"test"' , API_ROOT: '"/test/apis/train"' } |
1 2 3 4 5 6 | 'use strict' module.exports = { NODE_ENV: '"presentation"' , EVN_CONFIG: '"pre"' , API_ROOT: '"/pre/apis/train"' } |
对dev.env.js文件内容进行修改,修改后的内容如下。dev环境配制了服务代理,API_ROOT前的api是配制的代理地址。
1 2 3 4 5 | module.exports = merge(prodEnv, { NODE_ENV: '"development"' , VN_CONFIG: '"dev"' , API_ROOT: '"api/apis/v1"' }) |
第3步:修改项目package.json文件
对package.json文件中的scripts内容进行个性,添加上新定义的几种环境的打包过程,里的参数与前面的调协保持一致。
1 2 3 4 5 6 7 8 | "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=production env_config=test node build/build.js" , "build:pre" : "cross-env NODE_ENV=production env_config=pre node build/build.js" , "build:prod" : "cross-env NODE_ENV=production env_config=prod node build/build.js" }, |
在这里,NODE_ENV最好都设成production,因为在utils.js只做了production一种判定,亲测不会影响各环境API参数。
第4步:修改config/index.js
修改config/index.js文件中build参数,这里的参数会在build/webpackage.prod.conf.js中使用到
1 2 3 4 5 6 7 8 | build:{ // Template for index.html // 添加test pre prod 三处环境的配制 prodEnv: require( './prod.env' ), preEnv: require( './pre.env' ), testEnv: require( './test.env' ), //下面为原本的内容,不需要做任何个性 index:path.resolve(__dirname, '../dist/index.html' ), |
第5步:在webpackage.prod.conf.js中使用构建环境参数
对build/webpackage.prod.conf.js文件进行修改,调整env常量的生成方式。
1 2 3 | // 个性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的定义,调整后的内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | '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() //更多的其它内容,不需要做任何调整的内容 ... |
最后:
执行npm run build:test打包的就是测试环境
执行npm run build:prod打包的就是生产环境