vue项目代理配置大全

目录

目前正处于不断学习中,现在接触的只有这两个,日后遇到的vue项目代理会实时更新

1.vite  (vue3-admin-element-template-master)

2.vite + ts     (vue-pure-admin-main)

3.服务器代理:


目前正处于不断学习中,现在接触的只有这两个,日后遇到的vue项目代理会实时更新

1.vite  (vue3-admin-element-template-master)

  server: {
    host: '0.0.0.0', //服务器ip地址 
    port: 5566, //本地端口
    fs: {
      strict: false, //  支持引用除入口目录的文件
    },
    open: true, // 是否自动在浏览器打开
    proxy: {
      '/pcapi': {
        target: 'https:....../pcapi/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/pcapi/, ''),
      },
      '/role': {
        target: 'http://labour_admin.kuxia.top/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/role/, ''),
      },
    },
  },

2.vite + ts     (vue-pure-admin-main)

server: {
      // 是否开启 https
      https: false,
      // 端口号
      port: VITE_PORT,
      host: "0.0.0.0",
      // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
      proxy: {
        "^/pcapi/.*": {
          // 这里填写后端地址
          target: "https:....../pcapi/",
          changeOrigin: true,
          rewrite: path => path.replace(/^\/pcapi/, "")
        }
      }
    },

3.服务器代理:

### Vue项目中的代理配置 在开发环境中,为了方便前端与后端API之间的通信并解决跨域问题,在`vue.config.js`文件中进行代理配置是一种常见做法。对于Vue3而言,这种配置方式同样适用,并且提供了较为灵活的设置方法[^1]。 #### 使用 `devServer.proxy` 具体来说,可以在项目的根目录下创建或编辑名为`vue.config.js`的文件,加入如下所示的内容: ```javascript module.exports = { devServer: { port: 8080, host: 'localhost', open: true, https: false, proxy: { '/api': { // 这里定义了一个前缀为/api的代理路径 target: 'http://example.com', // 设置目标服务器URL changeOrigin: true, // 是否改变源 ws: false, // 是否启用WebSocket支持 pathRewrite: { // 路径重写规则 '^/api': '' } } } } } ``` 上述代码片段展示了如何利用`devServer.proxy`属性来指定一个或多个代理规则。其中的关键参数解释如下: - **target**: 指定要转发的目标地址。 - **changeOrigin**: 当设置为true时,会更改请求头中的origin字段为目标域名,这有助于某些情况下更好地模拟生产环境下的行为。 - **ws**: 如果应用程序依赖于WebSockets,则应将其设为true以便正确处理这类连接。 - **pathRewrite**: 可用于调整发送给远程服务的实际请求路径;上面的例子表示去除所有以`/api`开头的部分后再传递给目标服务器[^4]。 除了本地开发阶段外,当应用部署到线上之后,通常还会借助Nginx这样的web服务器来进行更复杂的流量管理和负载均衡操作。此时也可以通过类似的反向代理机制实现前后端分离架构下的接口调用优化[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TechWhiz-晓同

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值