如何修改Vite开发服务器资源基础路径（Docker+Laravel场景）

我在Docker容器中运行Vite开发服务器，使用Laravel Blade的@vite指令加载资源时，输出的资源地址始终是http://127.0.0.1:5173/path/to/asset或http://[::]:5173/path/to/asset，导致同一局域网的其他电脑无法加载资源——这些地址只能被服务器本机访问。

我发现@vite指令的基础路径来自Vite运行时生成的public/hot文件，但始终搞不清楚这个文件的生成逻辑和输出规则。试了各种能找到的配置项和环境变量，哪怕重启、重建Vite Docker容器，都没能改变hot文件的内容。

相关配置文件 #

docker-compose.yml #

...

vite:
    build:
      context: .
      dockerfile: vite/Dockerfile
    image: me/vite
    container_name: appvite
    restart: unless-stopped
    tty: true
    ports:
      - "5173:5173"
      - "8000:8000"
    working_dir: /app/
    volumes:
      - .:/app/
    networks:
      - app-network

...

vite.config.js #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig(({ command }) => {
    const config = { plugins: [], server: {} };
    if (command === 'serve') {
        // Dev specific configs
        config.plugins.push(
            laravel({
                input: ['resources/js/app.js'],
                refresh: true,
            })
        );
        config.server.origin = "http://test1";
        config.origin = "http://test2";
        config.base = "http://test3";
        config.server.base = "http://test4";
    } else {
        // Build specific configs
        config.plugins.push(
            laravel({
                input: ['resources/js/app.js'],
                refresh: false
            })
        );
    }

    return config;
});

vite/Dockerfile #

FROM node:16

WORKDIR /app

COPY . /app

EXPOSE 8000
EXPOSE 5173
CMD ["npm", "run", "dev-debug"]

.env #

...

ASSET_URL=http://test1
VITE_ASSET_URL=http://test2

...

解决方法 #

• 正确配置Vite的server.host和server.origin
  在vite.config.js的开发环境配置块中，必须设置server.host: '0.0.0.0'让Vite监听容器的所有网卡，同时把server.origin设为宿主机的局域网IP（比如http://192.168.1.100:5173，替换成你宿主机的实际IP）。修改后的代码如下：

  if (command === 'serve') {
      // Dev specific configs
      config.plugins.push(
          laravel({
              input: ['resources/js/app.js'],
              refresh: true,
          })
      );
      config.server.host = '0.0.0.0';
      config.server.origin = 'http://192.168.1.100:5173'; // 替换为宿主机实际局域网IP
  }
  

• 搞懂public/hot文件的生成逻辑
  public/hot文件是由laravel-vite-plugin自动生成的，内容直接取自Vite配置中的server.origin值。只要正确设置这个参数，重启Vite容器后，hot文件就会自动更新成你指定的地址，@vite指令也就会用这个地址加载资源。

• 别浪费时间改.env里的ASSET_URL或VITE_ASSET_URL
  开发环境下，@vite指令优先读取public/hot文件的内容，这两个环境变量主要用于生产构建阶段或静态资源的基础路径配置，对开发环境的热加载地址完全不起作用。

• 确保Docker端口映射和防火墙设置正确
  你的docker-compose.yml已经正确映射了5173端口，只要宿主机的防火墙允许5173端口的入站请求，同一局域网的设备就能通过宿主机IP访问Vite资源。

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