vue-cli3跨域请求代理配置

 1、在vue.config.js页面

module.exports = {
  // 基本路径
  publicPath: './',
  // 输出文件目录
  outputDir: 'dist',
  assetsDir: 'assets',
  // webpack-dev-server 相关配置
  devServer: {
    open: false, // 是否自动启动浏览器
    host: '0.0.0.0',
    port: 8080,
    proxy: {
      '/api': { // 请求前添加的路径，会代替target网址请求
        // target: 'http://192.168.0.119:8080/',
        target: 'http://192.168.0.101:8080/', // 代理服务器地址
        changeOrigin: true, // 是否跨域
        ws: true,
        pathRewrite: { // 路径重写
          '^/api': ''
        }
      }
    }
  }
}

2、axios的baseURL设置

axios.defaults.baseURL = process.env.NODE_ENV == 'production' ? '/qxt/api' : '/api'

在开发环境中

如果我们请求的为   /api/user --->请求会被替换为 http://192.168.0.101:8080/user

但是本地网页调式的路径为 localhost:8080/api/user,不过这没有关系，实际上我们请求的还是 http://192.168.0.101:8080/user

如上面那个请求，如果是开发环境会走代理网址，但如果是生产环境，那么就不会走代理。