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。

你可能感兴趣的:(前端,前端,javascript,vue3,vite)