vue.config.js 中的 Vue devServer.proxy 不工作

Question

我在位于存储库根目录的 vue.config.js 中使用以下配置，但它不起作用。

  module.exports = {
    devServer: {
        proxy: "http://localhost:3030"
      }
  }

我就是这样称呼它的

  return await fetch("/posts", options).then((response) =>
    response.json()
  ).catch(e => console.log("Error fetching posts", e));

然而，当我将调用代码更改为下面显示的代码时，一切正常

  return await fetch("http://localhost:3030/posts", options).then((response) =>
    response.json()
  ).catch(e => console.log("Error fetching posts", e));

编辑:

我应该提到我正在使用 Vite 进行构建，因为这给我带来了一些环境变量问题，所以它们也可能导致代理问题。

我对此进行了更多调查，结果发现 Vite 确实具有代理功能，因此我尝试更新我的代码以使用他们的代理，但仍然没有成功。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    "/posts": "http://localhost:3030/posts"
  }
})

Answer 1

vue.config.js 适用于 Vue CLI 脚手架项目（您的配置会 worked there），不适用于 Vite 项目。 Vite的配置存放在vite.config.js.

您 server.proxy 的 Vite 配置值包含不必要的 /posts 后缀：

"/posts": "http://localhost:3030/posts"
                                ^^^^^^

该值应该只是 URL 原始路径附加到的基础：

"/posts": "http://localhost:3030"

示例：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/posts': 'http://localhost:3030'
    }
  }
})

GitHub demo

vue.config.js 中的 Vue devServer.proxy 不工作

Vue devServer.proxy in vue.config.js not working

vue.js

vite