vue 打包部署多個環境

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

2.1: 第一張方法:

在config文件夾里面，新建一個 test.env.js(自定義名字)，這里可以復制一份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"' // 后台測試接口地址
})

修改prod.env.js 里面的代碼 

'use strict'
module.exports = {
  NODE_ENV: '"prod"',
  API_ROOT: '"http://pxh5.youlanw.com/server"' // 后台正式接口地址
}

在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   運行本地環境

npm run test          測試環境打包

npm run build         正式環境打包

命令行里面  NODE_ENV ,env_config  后面的取值跟   config文件夾下面     對應子js文件里    變量 NODE_ENV 取值保持一致

2.2: 第二種方法

在config文件夾里面，新建一個 test.env.js(自定義名字)

'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"production"',
  API_ROOT: '"http://bmh5.test.banmazgai.com/server"', // 后台測試接口地址 
  ENV_CONFIG: '"test"'  //這個是區分打包后環境的
})

修改prod.env.js 里面的代碼 

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"http://pxh5.youlanw.com/server"', // 后台正式接口地址
  ENV_CONFIG: '"prod"' 
}

在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   運行本地環境

npm run build:test    測試環境打包

npm run build:prod   正式環境打包

命令行里面  NODE_ENV = 后面的取值跟   config文件夾下面     對應子js文件里    變量 NODE_ENV 取值保持一致，即取值為  production ,  env_config 取值與 config/x.env.js 里面 變量 ENV_CONFIG取值相同

3: 修改build/build.js 下面得代碼   

有一段描述

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

修改為

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

4: build/webpack.prod.conf.js 文件

代碼:

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

改為：

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

5：封裝axios  ,自己新建js文件

import axios from 'axios'

axios.defaults.baseURL = process.env.API_ROOT        // API_ROOT 變量來源於 config/test.env.js，config/prod.env.js    里面聲明的變量 API_ROOT

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