Vue 3 + Vite v4生产环境出现net::ERR_CONNECTION_REFUSED问题求助

开发者阿泽

2026-8-1

问题描述

我有一个基于Vue 3、vue-cli、Nginx和代理运行的站点，近期将构建工具从vue-cli切换为Vite v4后，出现了net::ERR_CONNECTION_REFUSED错误。

我的vite.config.js配置如下：

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  base: "/",
  build: {
    chunkSizeWarningLimit: 3000,
  },
  server: {
    host: true,
    cors: false,
    proxy: {
      "/api": {
        target: "http://localhost:3200",
        changeOrigin: true,
        secure: false,
        // ws: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

我已尝试数周修复该问题，包括移除CORS配置及调整各类Vite配置选项，但均未成功。

排查与解决步骤

确认后端服务状态：直接在浏览器访问http://localhost:3200，或用curl http://localhost:3200测试，确认后端服务是否正常运行。如果后端未启动，必然会出现连接拒绝错误。
检查代理路径匹配：确保前端请求的路径确实以/api开头，比如/api/user会被代理到http://localhost:3200/user。若请求无/api前缀，代理不会生效，请求会直接发到Vite服务本身引发错误。
调整CORS配置：当前cors: false关闭了Vite开发服务器的CORS支持，若后端有跨域限制，尝试改为cors: true，或配置具体的CORS规则。
修正代理目标地址：把代理的target改为http://127.0.0.1:3200，避免localhost解析差异导致的连接问题。
检查端口占用：用lsof -i :3200（Mac/Linux）或netstat -ano | findstr :3200（Windows）查看3200端口是否被其他程序占用，确保后端服务独占该端口。
禁用rewrite测试：暂时注释rewrite配置，验证代理是否正常工作。部分后端服务需要保留/api前缀，去掉rewrite后请求会转发到http://localhost:3200/api/xxx，确认是否符合后端路由要求。
排查Nginx冲突：若同时使用Nginx，检查其配置是否和Vite代理存在冲突（比如Nginx也配置了/api反向代理）。开发环境可暂时停止Nginx，直接测试Vite代理是否正常。

内容的提问来源于stack exchange，提问作者Nikola Notevski