Vue3 + vite 本地开发配置 proxy

Posted 2022-06-21 samsample

最近又要搞一个站点，因为 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。