vue - 脚手架配置代理

默永

人生就像骑单车，想保持平衡就得往前走。

vue - 脚手架配置代理

2023-02-03 17:41:59 269 💗 0 @默永

在main.js文件中引入axios，然后Vue.prototype.$http = axios，就可以使用this.$http.get();调用

方法一

在vue.config.js添加如下配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //忽略lint检测
  devServer: {
    proxy: 'http://localhost:200'
  }
})

优点：配置简单，请求资源直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制求情是否走代理。
工作方式：若按照上述配置代理，当请求前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二

编写vue.config.js配置具体代理规则

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //忽略lint检测
  devServer: {
    proxy: {
      '/api1': { // 匹配所有已 '/api1' 开头的请求路径
        target: 'http://localhost:5000', // 代理目标的基础路径
        ws: true, // 用于支持websocket
        pathRewrite: { '^/api1': '' },  // 使用正则表达式过滤掉请求前缀
        changeOrigin: true
      },
      '/api2': { // 匹配所有已 '/api2' 开头的请求路径
        target: 'http://localhost:5001', // 代理目标的基础路径
        ws: true, // 用于支持websocket
        pathRewrite: { '^/api2': '' },  // 使用正则表达式过滤掉请求前缀
        changeOrigin: true
      }
    }
  }
})
/*
  changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
  changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
  changeOrigin默认值为true
*/

优点：可以匹配多个代理。且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。

目录导航

打开“扫一扫”，打开网页后点击屏幕右上角分享按钮
或点击复制连接

2023-02-03 17:41:59 0个人觉得很赞

发表评论

评论列表

博主

删除

点击加载更多

快来参与评论

公告

昵称：默永

园龄：2年171天

注册时间：2021-11-15

当前在第：1页

总共：1条

搜索

精品文章 48小时阅读排行

优秀文章 7天获赞排行