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选项解决了我的问题。

我还在码头内使用卡迪，这是我的配置：

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

我使用它作为反向代理，这里的“前端”引用了我的Vue应用程序，在开发模式下由Vite提供服务。

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

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

链接到vite doc - server.hmr配置

不确定这是否是正确的解决方案。希望能帮上忙。

Answer 2

我还在将Vue应用程序迁移到Vite的过程中。因此，我将docker-compose.yml中的docker-compose.yml从标准的-Vue 8080->8080更改为Vite的3000->8080 (以保持外向端口不变)。

version: "3.7"
services:
        ...
        ports:
        - 8080:3000

但是，Vite不会知道这个端口重映射。因此，我需要将clientPort: 8080 (实际上公开的端口)添加到vite.config.js中

export default defineConfig({
  ...
  server: {
    hmr: {
      clientPort: 8080,
    },
  }
}

Answer 3

我在使用nginx和ssl时也遇到了类似的问题。它正在用ws而不是wss在端口80上进行尝试。您的详细信息将是不同的，但是我查看日志以查看nginx正在做什么，然后在浏览器中查看它试图做什么。这是我的(部分) vite.config.js

export default defineConfig({
  server: {
    // hot module reload for dev server
    hmr: {
      host: 'yourhost',
      protocol: 'wss',
      clientPort: 443
    }
  }
})