项目部署

开发完成后的目标是把应用"发布上线"，让别人通过网址访问。Vue3 项目部署的本质是：先构建出纯静态文件（HTML/JS/CSS），再交给 Nginx 等 Web 服务器托管。本节完整演示这一过程。

打包构建

执行构建命令：

npm run build

构建完成后项目根目录出现 dist 文件夹，其中的 index.html 与 assets 就是全部上线资源。先在本地预览验证：

npm run preview

浏览器打开终端提示的地址（默认 http://localhost:4173/），确认功能正常。

上传到服务器

把 dist 内容上传到服务器，例如：

scp -r dist/* root@服务器IP:/var/www/taskhub/

配置 Nginx

为站点新建配置文件 /etc/nginx/conf.d/taskhub.conf：

server {
    listen       80;
    server_name  taskhub.example.com;

    root  /var/www/taskhub;      # 指向 dist 内容
    index index.html;

    # History 模式路由必须回退到 index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源带哈希，可放心缓存 30 天
    location /assets/ {
        expires 30d;
    }
}

执行 nginx -t 检查语法，再 nginx -s reload 让配置生效。

为什么需要 try_files

本项目使用 History 模式路由（地址形如 /stats，没有 #）。直接刷新 /stats 时，服务器找不到该物理文件会返回 404。try_files $uri $uri/ /index.html 让服务器把这类请求交给前端路由处理，于是刷新任意页面都不报错。

配置 HTTPS

正式上线建议用 certbot 申请免费证书并开启 443：

certbot --nginx -d taskhub.example.com

certbot 会自动改写 Nginx 配置并加上 HTTP 跳转 HTTPS 的规则，浏览器地址栏出现小锁即成功。

用环境变量区分接口地址

前后端分离时，把接口地址放进 .env 文件：

# .env.production
VITE_API_BASE=https://api.example.com

代码里用 import.meta.env.VITE_API_BASE 读取，构建时自动替换为对应环境的值，一套代码适配多环境。

小结

部署链路总结为：npm run build 产出 dist → 上传服务器 → Nginx 指向 dist 并配置 try_files → 可选 HTTPS 与环境变量。任务系统到此全部完成，接下来用"博客项目"巩固所学。