部署前端

前端编译后是一系列单纯的静态文件，可直接作为 静态网站 部署。

编译

编译前请于 web/.env.production 文件检查 VITE_AXIOS_BASE_URL 配置项（线上环境接口地址），比如：前端部署至 ask.test.com，后端部署至 ask-api.test.com，则应该填写 https://ask-api.test.com（需要正确填写的协议和端口号（80/443可省略），尾部无需带 /）。

接下来于 web 根目录执行 pnpm build 命令，编译完成后输出 web/dist 目录，将该目录的所有内容打包上传至服务器并创建网站即可，以下提供 宝塔面板网站、自装 nginx 网站配置 两种示例。

宝塔面板网站

打开面板 > 网站 > 顶栏选择 HTML 项目 > 添加：

1. 填写网站域名，如 ask.test.com
2. 选择网站根目录，并将以上 web/dist 目录以内的所有文件，打包上传至根目录。
3. 网站添加成功后，按需配置 SSL 证书等。

自装 nginx 的网站配置

只保留了配置的核心部分，总体就是一个静态网站的配置，并无任何特殊。

server
{
    listen 80;
    listen 443 ssl http2 ;
    server_name ask.test.com;
    index index.html index.htm default.htm default.html;
    root /www/wwwroot/ask.test.com;

    #SSL-START SSL相关配置
    ssl_certificate    /www/server/panel/vhost/cert/ask.test.com/fullchain.pem;
    ssl_certificate_key    /www/server/panel/vhost/cert/ask.test.com/privkey.pem;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    ssl_session_tickets on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    add_header Strict-Transport-Security "max-age=31536000";
    error_page 497  https://$host$request_uri;
    #SSL-END

    location ~ .*\\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }

    location ~ .*\\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;
    }
    access_log  /www/wwwlogs/ask.test.com.log;
    error_log  /www/wwwlogs/ask.test.com.error.log;
}