项目部署

构建生产环境产物，部署到 Nginx 或 Docker。

构建生产环境

pnpm run build

构建完成后，会在项目根目录生成 dist 文件夹。

本地预览

本地启动静态服务器，预览构建产物：

pnpm run preview

Nginx 部署

上传文件

将 dist 目录下的文件上传到 /usr/share/nginx/html

配置 Nginx

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # API 代理，与 .env.production 的 VITE_APP_BASE_API 保持一致
    location /prod-api/ {
        proxy_pass http://api.youlai.tech/;
    }

    # gzip 压缩
    gzip on;
    gzip_types text/css application/javascript;
}

重启 Nginx

nginx -t
nginx -s reload

Docker 部署

Dockerfile

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

构建和运行

docker build -t vue3-admin .
docker run -p 80:80 vue3-admin

环境变量

生产环境在 .env.production 配置接口地址。详见系统设置。