Guava Docs

Appearance

部署上线 ​

部署前检查 ​

  • pnpm build 成功无报错
  • pnpm preview 本地预览样式与交互正常
  • 确认目标环境的访问路径与 base 配置一致

当前站点 base 为 /，部署后访问地址形如：

bash
https://domain.com/

部署步骤 ​

1. 构建 ​

bash
pnpm build

2. 上传产物 ​

将 ./dist/ 目录下的全部内容上传到服务器。

3. 配置 Web 服务器 ​

站点需通过 HTTP/HTTPS 访问，不要用 file:// 直接打开 index.html。

Nginx 配置示例 ​

若需部署到 https://domain.com/ 域名根目录：

nginx
server {
    listen 80;
    server_name domain.com;

    location / {
        root /var/www/guava-web;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

TIP

root 路径指向 dist 目录。

alias，需要指向到 dist/ 目录中的文件，如 root /var/www/guava-web/。 特别需要注意尾部的 /。

Nginx root / alias 使用示例 ​

假设我们的网站根目录在 /var/www/html，所有图片文件都存放在 /var/www/html/static/img/这个目录下。

那么让用户通过 https://example.com/static/img/logo.png 这个地址访问到这张图片。

  • 使用 root（路径拼接）配置：
nginx
location /static/ {
    root /var/www/html;
}

查找逻辑：root 的规则是 root 路径 + location 路径。

最终查找路径：/var/www/html + /static/img/logo.png = /var/www/html/static/img/logo.png

✅ 结果：成功找到图片。

简单来说，root 的行为是：把整个请求的 URL 路径，原封不动地拼在 root 指定的目录后面。

  • 使用 alias（路径替换）配置：
nginx
location /static/ {
    alias /var/www/html/static/img/;
}

查找逻辑：alias 的规则是 用 alias 路径替换掉 location 匹配的那一段路径。

最终查找路径：alias 指定的目录 /var/www/html/static/img/，加上 URL 中 /static/ 之后 的剩余部分 logo.png。

结果是：/var/www/html/static/img/logo.png

✅ 结果：成功找到图片。

简单来说，alias 的行为是：把 URL 中的 /static/ 这部分 重写 成 /var/www/html/static/img/，后面的路径保持不变。

CI/CD ​

  • 待补充

部署后验证 ​

  1. 打开首页，确认样式与导航正常
  2. 访问各个组件页面，确认样式与交互正常
  3. 检查浏览器 Network 面板，确认 /assets/* 资源均返回 200

常见问题 ​

现象原因处理
页面无样式用 file:// 打开或路径不对通过 HTTP 访问，确认 base 与部署路径一致
子页面刷新 404服务器未配置 fallback添加 try_files 回退到 index.html
资源 404base 与部署路径不匹配统一改为 / 并重新 build

相关链接 ​