构建和部署

了解如何构建生产环境和部署项目。

构建生产环境

bash

pnpm run build

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

本地预览

bash

pnpm run preview

Nginx 部署

上传文件

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

配置 Nginx

nginx

server {
    listen 80;
    server_name localhost;

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

    # API 代理
    location /api/ {
        proxy_pass http://api.youlai.tech/;
    }

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

重启 Nginx

bash

nginx -t
nginx -s reload

Docker 部署

Dockerfile

dockerfile

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

构建和运行

bash

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

环境变量

生产环境在 .env.production 配置：

bash

VITE_APP_API_URL = https://api.youlai.tech

构建和部署 ​

构建生产环境 ​

本地预览 ​

Nginx 部署 ​

上传文件 ​

配置 Nginx ​

重启 Nginx ​

Docker 部署 ​

Dockerfile ​

构建和运行 ​

环境变量 ​

相关链接 ​

构建和部署

构建生产环境

本地预览

Nginx 部署

上传文件

配置 Nginx

重启 Nginx

Docker 部署

Dockerfile

构建和运行

环境变量

相关链接