第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打包的就是生产环境