前提姿勢

獲取終端中輸入的命令

下面的這個在webpack中會有個process物件 ，看下面圖就知道使用 process.argv.splice() 就可以獲取輸入命令引數了

此處教程區分介面

這裡是通過不同命令將修改介面前部分的地址或者修改單詞。下面是我修改的，都是同一個連結，但後面的不一樣。

// 正式的路徑為：https://api.xxxx.com/ajmall
// 測試環境路徑為 https://api.xxxx.com/dev

教程

1、進行代理跨域（可選）

此處我做代理為了跨域。此處是可選的，在 dev.env.js 檔案中必須得配置下。

// 1、在config資料夾中，找到 index.js ，新增進代理程式碼段
'use strict'
// Template version: 1.2.4
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')
var webpack = require("webpack");
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath:
 
 '/',
    proxyTable: {
      '/dev': {
        target:'http://api.xxxxx.com/dev',
        changeOrigin: true,   // 2、是否跨域，ture開啟
        pathRewrite: {
         '^/dev': '/'
        }
       }
    },
    ...
}

2、dev.env.js 與 prod.env.js

在config資料夾的 dev.env.js 與 prod.env.js 分別本地和正式。本地開發的時候是 dev.env.js跑著，但是請求介面的話，會有跨域問題，直接做代理，也就是說 dev.env…js 只要配置下代理即可。打包後跑的是prod.env.js指令碼，那麼這裡得區分下打什麼樣的包（測試還是正式）

// 1、在config資料夾中 dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ADMIN_SERVER: '"/dev/"', // 2、可選擇用於代理（解決跨域）
  API: '""'
})

// 1、在config資料夾中 prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API: process.argv.splice(2) == 'dev'?'"/dev"':'"/ajmall"' // 2、此處是判斷你輸入，如果是輸入的 npm run  build -- dev 那麼就賦值給 process.env.API 。如果不是直接build的，後面是正式包。
}

3、axios 請求配置

此處是axios中配置下：

import axios from 'axios'
var ajax = axios.create({
    baseURL: process.env.ADMIN_SERVER || process.env.API, //  1、process.env.ADMIN_SERVER 是代理的URL。process.env.API是打包的 api 。這句判斷是如果 代理沒有，那麼走後面的。這個是js短路
    headers: {
        appkey:'xxxxxxxxxxx'
    }
});

export default ajax;

4、完成

到了第三步是已經完成，檢驗下成果：

# 輸入下面命令，就是打測試包
npm run build -- dev

# 輸入下面的，就是打正式包
npm run build

打包好了，就放在伺服器中看看是否請求連結不一樣。