使用http-proxy-middleware 代理解决跨域（项

1. vue.config.js.js,在proxy中添写如下代码：

// 运行配置
    devServer: { 
        port: '9527', //代理端口
        open: false, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开
        proxy: {
            '/api': {
                target: process.env.VUE_APP_HTTP_URL,
                changeOrigin: true, //是否跨域
                pathRewrite: { //重写路径
                    '^/api': '/'  // 或 者 'http://localhost:8080/api'
                }
                // 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢
                // 因此这里的意义在于， 以 /api开头的url请求，代理都会知道实际上应该请求那里，
                // ‘我是服务器/api’，后面的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是
                // https://我是服务器/api/test/test
            }
        }
    },

2. vue.config.js

const chalk = require('chalk')
const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)

}
module.exports = {
    // 没有书写outputDir属性   默认'dist'  对应dev.assetsSubDirectory
    outputDir: 'dist',
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    // compiler: false,
    //在vue-cli.3.3版本后 baseUrl被废除了，因此这边要写成 publicPath ( 资源地址 )
    publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PUBLICPATH : '/' , 
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {}
        // 启用 CSS modules for all css / pre-processor files.
        // modules: false
    },
    // 运行配置
    devServer: { 
        port: '8222', //代理端口
        open: false, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开
        proxy: {
            '/api': {
                target: process.env.VUE_APP_HTTP_URL,
                changeOrigin: true, //是否跨域
                pathRewrite: { //重写路径
                    '^/api': '/'  // 或 者 'http://localhost:8080/api'
                }
                // 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢
                // 因此这里的意义在于， 以 /api开头的url请求，代理都会知道实际上应该请求那里，
                // ‘我是服务器/api’，后面的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是
                // https://我是服务器/api/test/test
            }
        }
    },
    chainWebpack: config => {
        // 提示输出的哪个地址
        console.log(chalk.blueBright('\n\n running ' + process.env.VUE_APP_PROJ_NAME + ' : ') + 
                    chalk.yellowBright(process.env.VUE_APP_HTTP_URL + ' please wait... \n'));
        // 判断不同环境 做相应处理           
        if(process.env.NODE_ENV === 'production') {
            // 测试生产环境, 不压缩js代码
            if (process.env.VUE_APP_TITLE === 'alpha') {
                config.optimization.minimize(false)
            }
        }
        //set第一个参数：设置的别名，第二个参数：设置的路径
        config.resolve.alias
        .set('@',resolve('./src'))
        .set('components',resolve('./src/components'))
        .set('assets',resolve('./src/assets'))
        .set('views',resolve('./src/views'))
        .set('network',resolve('./src/network'))
        //注意 store 和 router 没必要配置

        config.plugin('html')
        .tap(args => {
            args[0].title = '公募综合业务平台'
            return args
        })
    }
}