In project development, our projects are generally divided into development version, beta version, Pre version and Prod version. The default environment of VUE-CLI is dev and Prod. Before each release of beta or Pre version, the API address in the source code was modified and packaged, which was very troublesome. It would be great if you could package according to your environment. Collected a lot of information on the net, can divide the environment package program now, as to how to play, then live to see.

Step 1: Install cross-env

To install cross-env, run the following command in the project directory. My IDE is Webstorm, and run the following command directly in the IDE’s Terminal window, or through Windows CMD, Linux Terminal to locate the root directory of the project.

npm i --save-dev cross-env
Copy the code

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"'
}


'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: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"
  },
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

build:{
    // Template forIndex.html / / addedtestProdEnv: require('./prod.env'),
    preEnv: require('./pre.env'),
    testEnv: require('./test.env'Index :path.resolve(__dirname,'.. /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.

// 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')() // Commented out 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'// const spinner = ora()'building for production... ')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode... ') spinner. Start () // More content, content that doesn't need to be adjusted at all...Copy the code

Step 7: Use it in code

Use process.env.api_root instead of the actual API address in your code, as in:

//Axios.defaults.baseURL = "/apis/v1"
Axios.defaults.baseURL = process.env.API_ROOT
Copy the code