Vite 重新加载循环

Question

我正在尝试完成从 Parcel 到 Vite 的迁移。我们使用 caddy 通过 Docker 容器在本地反向代理自定义域。我遇到的问题是，当我在浏览器中加载客户端时，它会不断刷新，控制台说 vite 正在连接，然后循环中“服务器连接丢失，轮询重新启动”。

这是 vite.config.json：

// @ts-ignore
import tailwindcss from "@tailwindcss/jit";
import react from "@vitejs/plugin-react";
// import reactRefresh from "@vitejs/plugin-react-refresh";
// @ts-ignore
import dotenv from "dotenv";
// import postcssImport from "postcss-import";
import presetEnv from "postcss-preset-env";
import { defineConfig } from "vite";

// export default (() => {
// Object.assign(process.env, loadEnv("", ".."));
// dotenv.config({ path: "../.env" });
// now you can access config with process.env.{configName}

export default defineConfig({
  server: {
    host: "0.0.0.0",
    // hmr: false,
    port: 1234,
  },
  plugins: [react()],
  css: {
    postcss: {
      plugins: [
        tailwindcss,
        presetEnv({ stage: 1 }),
      ],
    },
  },
});
// });

我已提取容器日志，但没有看到任何崩溃报告。我尝试过修改配置，但没有任何实际效果。

Answer 1

我遇到了类似的问题，并使用clientPort配置中的选项解决了我的问题。

我也在 Docker 中使用 Caddy，这是我的配置：

:80 {
    reverse_proxy /api/* back:3000
    reverse_proxy /graphql back:3000
    reverse_proxy front:8080
}

我使用它作为反向代理，这里的“front”指的是我在开发模式下由 Vite 提供的 Vue 应用程序。

通过将其添加到我的vite.config.ts中，它解决了问题。

 server: {
    port: 8080,
    host: "0.0.0.0",
    hmr: {
      clientPort: 80,
    },
  },

链接到 vite 文档 - server.hmr 配置

不确定这是否是正确的解决方案。希望能帮助到你。