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