Docker容器内运行Vite开发服务器外部无法访问端口问题求助

问题原因 #

Vite 开发服务器默认仅绑定容器内部的本地回环地址 127.0.0.1，仅支持容器内部访问，外部请求无法到达该地址。而你之前用的 webpack dev server 默认绑定 0.0.0.0（监听所有网络接口），所以可以正常对外提供服务。

解决方案 #

你可以任选以下任意一种方式修复：

方案1：修改 vite.config.ts 配置 #

在 server 配置项中新增 host 字段，指定监听所有网络接口，修改后的完整配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    resolve: { alias: { '@': '/src' } },
    plugins: [vue()],
    server: {
        port: 8080,
        host: '0.0.0.0' // 新增该行配置
    }
})

修改后重启 Vite 服务即可从外部正常访问。

方案2：启动命令添加指定 host 参数 #

如果不想修改配置文件，也可以直接在启动时指定 host：

1. 可以修改 package.json 中的 vite 启动命令：

   "vite": "vite --host 0.0.0.0",
   

2. 也可以在容器内启动时直接追加参数：

   npm run vite -- --host 0.0.0.0
   

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