vue package to deploy multiple environments

1：先下载 cross-env   npm install  --save-dev cross-env

2.1: the first method:

In the config folder inside, a new test.env.js (custom name), where you can copy the contents inside a dev.env.js

'use strict'

const merge = require('webpack-merge')

const devEnv = require('./dev.env')

module.exports = merge(devEnv, {

  NODE_ENV: '" test"',

  API_ROOT: ' "http://bmh5.test.banmazgai.com/server"' // backstage test interface address

})

Modify code inside prod.env.js 

'use strict' 
module.exports = { 
  NODE_ENV: ' " Prod "', 
  API_ROOT: ' "http://pxh5.youlanw.com/server"' // Background formal interface address 
}

Modify the command line in the file package.json

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",   
    "test": "cross-env NODE_ENV=test env_config=test node build/build.js",
    "build": "cross-env NODE_ENV=prod env_config=prod node build/build.js"
  },

npm run dev / start running a local environment

npm run test test environment package

npm run build a formal environmental packaging

Command line inside NODE_ENV, behind env_config value with the config folder below the corresponding sub-js file variable values ​​consistent NODE_ENV

2.2: The second method

In the config folder inside, a new test.env.js (custom name)

'use strict' 
const = Merge the require ( 'WebPACK-Merge') 
const = devenv the require ( './ dev.env') 

module.exports = Merge (devenv, { 
  NODE_ENV: ' " Production "', 
  API_ROOT: ' "HTTP : //bmh5.test.banmazgai.com/server " ', // address of the background test interface 
  ENV_CONFIG:'" test " ', // this is to distinguish the packaged environment 
})

Modify code inside prod.env.js 

'use strict' 
module.exports = { 
  NODE_ENV: ' " Production "', 
  API_ROOT: ' "http://pxh5.youlanw.com/server"', // background formal interface address 
  ENV_CONFIG: ' " Prod "' 
}

Modify the command line in the file package.json

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",   
    "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },

npm run dev / start running a local environment

npm run build: test test environment package

npm run build: prod formal environment package

Command line argument behind which NODE_ENV = config folder below with the corresponding sub-js file variable values ​​NODE_ENV consistent, i.e., value of production

Env_config the same value config / x.env.js which variable values ​​ENV_CONFIG

3: Modify build / build.js following codes obtained   

There is a description

const spinner = ora('building for prod....') 

change into

const spinner = ora('building for ' + process.env.env_config)

4: build / webpack.prod.conf.js file

Code:

 const env = require('../config/prod.env')

Read:

const env = require('../config/' + process.env.env_config + '.env')

5: Packaging axios, their new js file

import axios from 'axios'

axios.defaults.baseURL = process.env.API_ROOT // API_ROOT variables from config / test.env.js, config / prod.env.js which declared variable API_ROOT

axios.defaults.headers.common['Authorization'] = 'JSESSIONID=' + _sessionId