vue-cli 3.0版本，配置代理Proxy，不一樣環境不一樣target（生產環境，uat環境和本地環境的配置）

一、在項目的的根目錄下新建vue.config.js

二、新建一個config包，裏面存放不一樣的環境文件，裏面包含：pro.env.js(生產環境配置)，uat.env.js(測試環境配置),dev.env.js(本地環境)

文件目錄以下：

2-一、生產環境內容

// 生產環境
module.exports = {
    NODE_ENV: '"production"',
    hosturl:''
}

2-二、測試環境內容

// 測試環境
module.exports = {
    NODE_ENV: '"test"',
    hosturl:''
}

2-三、本地環境內容

const hosturl= '';
// 本地環境
module.exports = {
    NODE_ENV: '"development"',
    hosturl:hosturl
}

3，vue.config.js 內容配置

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path');

const devProxy = ['/pc','/weixin','android',...];  // 代理
var proEnv = require('./config/pro.env');  // 生產環境
var uatEnv = require('./config/uat.env');  // 測試環境
var devEnv = require('./config/dev.env');  // 本地環境
const env = process.env.NODE_ENV;
let target = '';
// 默認是本地環境
if(env==='production'){  // 生產環境
    target = proEnv.hosturl;
}else if(env==='test'){ // 測試環境
    target = uatEnv.hosturl;
}else{  // 本地環境
    target = devEnv.hosturl;
}
// 生成代理配置對象
let proxyObj = {};
devProxy.forEach((value, index) => {
    proxyObj[value] = {
        target: target,
        changeOrigin: true,
        pathRewrite: {
            [`^${value}`]: value
        }
    };
});

module.exports = {
    baseUrl: '/',
    outputDir: 'dist',
    devServer: {
        // open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        disableHostCheck: true,
        // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
        proxy: proxyObj, // string | Object
        before: app => {}
    }
};

四、反向代理

有時咱們須要進行配置反向代理，必定要加上「disableHostCheck: true」這句話

五、命令配置，在package.json文件裏配置

"scripts": {
    "dev": "vue-cli-service serve --open",
    "prod":"vue-cli-service build --mode=production",
    "uat": "vue-cli-service build --mode=test" 
  },

5-1 serve 和build 的區別

serve 是服務命令，build是用於打包用的，好比 npm run dev ,能夠在瀏覽器上直接瀏覽頁面，prod和uat 這兩個就只能在本地打好包，而後放到服務器上，訪問網址才能看到。

如何要在瀏覽器上看到不一樣的環境就用以下命令

"scripts": {
    "dev": "vue-cli-service serve --open",
    "prod":"vue-cli-service serve --mode=production",
    "uat": "vue-cli-service serve --mode=test" 
  },

你們能夠根據本身的需求來配置。

這時，代理,不一樣環境走不一樣的target就配置好了，下面在多說些注意事項

6，cli-service 服務命令，默認狀況下必須有一個development

--open    open browser on server start
  --mode    specify env mode (default: development)
  --host    specify host (default: 0.0.0.0)
  --port    specify port (default: 8080)
  --https   use https (default: false)

七、

NODE_ENV - 環境的運行模式有"development", "production"  "test" 
hosturl- target（如：https:www.baidu.com）.

8.官方解釋

8-1，環境變量和模式

您能夠經過將如下文件放在項目根目錄中來指定env變量：

.env                ＃在全部狀況下加載
.env.local ＃在全部狀況下加載，經過GIT中忽略
.env.[model] ＃僅裝入指定的模式
.env.[model].local   ＃僅裝入指定的模式，經過GIT中忽略
env文件只包含環境變量的鍵=值對：

FOO=bar
VUE_APP_SECRET=secret
加載的變量將可用於全部vue-cli-service命令，插件和依賴項。

模式
模式是Vue CLI項目中的一個重要概念。默認狀況下，Vue CLI項目中有三種模式：

development 用於 vue-cli-service serve
production被vue-cli-service build和使用vue-cli-service test:e2e
test 用於 vue-cli-service test:unit
請注意，模式不一樣NODE_ENV，由於模式能夠包含多個環境變量。也就是說，NODE_ENV默認狀況下每一個模式都設置爲相同的值 - 例如，NODE_ENV將設置爲"development"開發模式。

您能夠經過後綴.env文件來設置僅適用於特定模式的環境變量。例如，若是建立.env.development在項目根目錄中命名的文件，則在該文件中聲明的變量將僅在開發模式下加載。

您能夠經過傳遞--mode選項標誌來覆蓋用於命令的默認模式。例如，若是要在build命令中使用開發變量，請將其添加到package.json腳本中：

"dev-build": "vue-cli-service build --mode development",
示例：分段模式
假設咱們有一個包含如下.env文件的應用：

VUE_APP_TITLE=My App
如下.env.staging文件：

NODE_ENV=production
VUE_APP_TITLE=My App (staging)
vue-cli-service build創建一個生產應用程序，裝載.env，.env.production以及.env.production.local若是它們存在;

vue-cli-service build --mode staging創建在分段模式中，使用生產應用.env，.env.staging以及.env.staging.local若是它們存在。

在這兩種狀況下，應用程序都是做爲生產應用程序構建的，由於NODE_ENV它在暫存版本中process.env.VUE_APP_TITLE會被不一樣的值覆蓋。

9. 參考文獻

https://github.com/vuejs/vue-cli/blob/dev/docs/guide/mode-and-env.md