如何不依赖第三方部署Vite应用？Docker环境下的适配方案

核心思路 #

生产环境下，Vite的正确玩法是先构建静态资源包，再用专业静态服务器（比如Nginx）托管，同时通过服务器配置解决Vue Router的history模式问题和接口代理需求——完全不需要依赖npx serve、npm run dev或第三方插件。

具体步骤 #

1. 先理清楚项目配置要点 #

• 如果用了Vue Router的history模式（比hash模式更友好），后续要靠服务器配置避免刷新页面404；
• 开发时vite.config.js里的server.proxy是给开发环境用的，生产环境要把这些代理规则迁移到服务器（Nginx）上，不要指望Vite帮你在生产环境做代理。

2. 编写多阶段构建的Dockerfile #

多阶段构建能大幅缩小最终镜像体积：先在Node环境里构建生产包，再把产物复制到轻量的Nginx镜像里。

# 第一阶段：构建生产静态包
FROM node:18-alpine AS builder
WORKDIR /app
# 先拷贝依赖文件，利用Docker缓存
COPY package*.json ./
RUN npm ci --only=production
# 拷贝项目代码
COPY . .
# 执行构建命令，生成dist目录
RUN npm run build

# 第二阶段：用Nginx托管静态资源
FROM nginx:alpine
# 替换Nginx默认配置为我们自定义的规则
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 把第一阶段构建好的dist目录复制到Nginx的静态文件目录
COPY --from=builder /app/dist /usr/share/nginx/html
# 暴露容器端口
EXPOSE 80
# 启动Nginx（前台运行，避免容器退出）
CMD ["nginx", "-g", "daemon off;"]

3. 编写Nginx配置文件（nginx.conf） #

这个配置直接解决两个核心痛点：

server {
    listen 80;
    server_name localhost;

    # 指定静态资源根目录
    root /usr/share/nginx/html;
    index index.html;

    # 处理Vue Router history模式：所有路由请求都指向index.html，避免刷新404
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 配置接口反向代理（替换成你的实际后端地址）
    # 比如开发时Vite配置的是 '/api' 代理到 'http://backend:3000'，这里直接照搬逻辑
    location /api {
        proxy_pass http://backend:3000; # 替换为你的后端服务地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

4. 构建并运行Docker镜像 #

# 构建镜像，命名为vite-vue-app
docker build -t vite-vue-app .

# 启动容器，把本地8080端口映射到容器80端口
docker run -d -p 8080:80 vite-vue-app

关键说明 #

• 为啥不用npx serve：它是个极简静态服务器，默认不支持history模式的路由重写，也没反向代理能力，根本满足不了生产环境的路由和接口需求；
• 为啥不用npm run dev：dev模式是给开发用的，带热重载、源码映射这些调试特性，性能差还不安全，完全不适合生产；
• 不需要第三方插件：用Nginx原生配置就能搞定所有问题，这也是Vite官方推荐的生产部署方式。

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