Vue3 + vite 本地开发配置 proxy

最近又要搞一个站点,因为 Vue3 已经面世一段时间了,所以这次就打算基于 Vue3 来进行开发前端。因为项目也比较赶,所以就没有完整熟读Vue3的文档,而是一来就上手,用脚手架先开一个项目,有什么不懂的,再查。

这不,准备和后端服务联调了,却发现脚手架没有像 vue2 + webpack 一样配置 proxy 。而且Vue3 的脚手架使用的是 vite(官方的自然是最好的),那么在 vite 中应该如何配置后端的路由转发呢?

        上网找了一大圈,大部分都是说,在 vite.config.js 里面直接配置 proxy 即可。

        例如: 误人子弟1

        但实际不是这么回事,发现请求没有到达后端。

        没有办法,只能找官方文档,翻翻翻,终于找到:Vite.Server.Proxy

        照着配置就行了:

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
});

        是不是很有 Vue2 的影子? Vue2(vue.config.js) 用的关键字是 devServer。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值