vue-cli 3.0版本，配置代理Proxy，不同环境不同target（生产环境，uat环境和本地环境的配置）

1、在项目的的根目录下新建vue.config.js

2、新建一个config包，里面存放不同的环境文件，里面包含：pro.env.js(生产环境配置)，uat.env.js(测试环境配置),dev.env.js(本地环境)

文件目录如下：

2-1、生产环境内容

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

2-2、测试环境内容

// 测试环境
module.exports = {
    NODE_ENV: '"test"',
    hosturl:''
}

2-3、本地环境内容

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 => {}
    }
};

4、反向代理

有时我们需要进行配置反向代理，一定要加上“disableHostCheck: true”这句话

5、命令配置，在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)

7、

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

8. 参考文献

https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md

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