Docker环境下Vite开发服务器注入错误主机IP问题排查

这个问题是因为vite --host默认会绑定所有网络接口（包括IPv6的::），而Docker容器内的网络环境下，Vite错误地将IPv6地址作为资源注入的地址，宿主机无法正常解析这个地址，从而导致资源加载报错。

解决方法有以下几种：

• 指定绑定IPv4地址启动
  把启动命令改成vite --host 0.0.0.0，这样Vite会优先使用容器的IPv4网络地址生成资源链接，避免选中IPv6的::地址。

• 在Vite配置中强制指定资源来源
  修改项目根目录的vite.config.js或vite.config.ts，添加server.host和server.origin配置：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
    plugins: [
      laravel({
        input: ['resources/js/index.tsx'],
        refresh: true,
      }),
    ],
    server: {
      host: '0.0.0.0',
      origin: 'http://localhost:5173' // 或者匹配你的APP_URL地址，比如http://teddy.test:5173
    }
  });
  

  这里origin会强制Vite注入资源时使用指定的地址，彻底避免自动选择错误的网络地址。

• 确认Docker端口映射配置
  确保启动容器时已经正确映射了5173端口，比如：

  docker run -p 5173:5173 your-container-image
  

  端口映射不正确也会导致资源加载路径异常。

内容的提问来源于stack exchange，提问作者Вукашин Лекић