This is the 7th day of my participation in Gwen Challenge

Step 1: Install cross-env

Cross-env can set and use environment variables across platforms;

For the most part, using Windows is similar to: NODE_ENV=production command line directives get stuck, there are many differences between Windows and POSIX when using command lines (e.g., $ENV_VAR on POSIX, %ENV_VAR%… on Windows)

Cross-env makes it easy to use unique directives for different platforms without worrying about cross-platform issues

Step 2: Modify the parameters in each environment

Add test.env.js and pre.env.js in config/. Modify the contents of prod.env.js as follows:

'use strict'
module.exports = {
    NODE_ENV: '"production"'.EVN_CONFIG:'"prod"'.API_ROOT:'"/apis/v1"'
}
Copy the code

Modify the contents of test.env.js and pre.env.js respectively. The modified contents are as follows:

'use strict'
module.exports = {
    NODE_ENV: '"testing"'.EVN_CONFIG:'"test"'.API_ROOT:'"/test/apis/train"'
   }
Copy the code
'use strict'
module.exports = {
 NODE_ENV: '"presentation"'.EVN_CONFIG:'"pre"'.API_ROOT:'"/pre/apis/train"'
}
Copy the code

Modify the content of the dev.env.js file as follows: The dev environment configates the service proxy, and the API before API_ROOT is the address of the configured proxy.

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"'.VN_CONFIG: '"dev"'.API_ROOT: '"api/apis/v1"'
})
Copy the code

Step 3: Modify the project package.json file

Personalize the contents of the scripts in package.json file by adding the newly defined packaging procedures for several environments, and keeping the parameters in the package consistent with the previous reconciliation.

"scripts": {  
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"."start": "npm run dev"."build": "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" 
   },
Copy the code

In this case, NODE_ENV is best set to production, because utils. Js only makes production judgment, and the parent test does not affect the environment API parameters.

Step 4: Modify config/index.js

Modify the config/index. Js file build parameters, the parameter will be in the build/webpackage prod. Conf. To use js

ProdEnv: require('./prod.env'), preEnv: require('./prod. Resolve ('./pre.env'), testEnv: require('./test.env'), // /dist/index.html') }Copy the code

Step 5: Use the build environment parameters in webpackage.prod.conf.js

To build/webpackage. Prod. Conf. Js file modification, adjust the env constants generation.

// Define the env constant
// const env = require('.. /config/prod.env')
const env = config.build[process.env.env_config+'Env']

Copy the code

Step 6: Adjust build/build.js

Delete the assignment from process.env.node_env and modify the spinner definition as follows:

'use strict'
require('./check-versions') ()// Comment out the code
// 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')
// Modify the definition of spinner
// const spinner = ora('building for production... ')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode... ' )
spinner.start()
// More other content, content that doesn't need any adjustment...
Copy the code

Finally, NPM run build:test packages the test environment and NPM run build:prod packages the production environment