vue-proxy

2019-08-21

vue-cli 项目中配置反向代理，包括vue2，vue3

vue2项目

修改config/index.js文件

module.exports 对象里dev下
proxyTable 属性设置代理
proxyTable: {
  '/api': {
    target: 'http://dev.lywc.lyta.gov.cn',     //需要代理的域名
    changeOrigin: true,      //表示是否跨域
    logLevel: 'debug',
    secure: false,
    pathRewrite: {
      '^/api': ''
    }
  }
},

配置完代理后，就可以使用 /api ， /api就代表了你所配置的代理域名
配置好这写之后就可以直接使用/api+接口名称发送请求了
例如:原来的请求地址为 192.168.1.1:8080/log
配置代理后直接使用 /api/log 就可以了

vue3项目

vue3跟vue2不一样的是，vue3的一些webpack都是默认配置的，不用手动修改了，需要自己手动在根目录下创建 vue.config.js 文件
文件内容

const webpack = require("webpack");
const $path = require("path");
function resolve(dir) {
  return $path.join(__dirname, dir);
}
module.exports = {
  publicPath: "",
  lintOnSave: true,
  chainWebpack: config => {
    config.resolve.alias.set("@", resolve("src"));
  },
  devServer: {
    port: 8080,
    proxy: {
      "/api": {
        target: "https://store.ihuyue.cn", // 测试环境
        // target: 'https://store.ihuyue.cn',  // 正式环境
        changeOrigin: true,
        logLevel: "debug",
        secure: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    },
    disableHostCheck: true
  },
  configureWebpack: {
    devtool: "source-map"
  },
  // eslint-disable-next-line no-dupe-keys
  configureWebpack: {
    plugins: []
  }
};