Pic-Smaller项目部署到二级目录的完整指南

在Pic-Smaller项目中，将前端应用部署到二级目录是一个常见的需求，特别是当我们需要将多个应用部署在同一域名下的不同路径时。本文将详细介绍如何正确配置和部署Pic-Smaller到二级目录。

基础配置步骤

1. 修改Vite配置
   打开项目根目录下的vite.config.js文件，找到base参数并将其值设置为你的二级目录路径。例如，如果你的二级目录是/sub，则配置应为：

   base: '/sub'
   

2. 构建生产版本
   执行构建命令生成优化后的生产版本：

   npm run build
   

   构建完成后会在项目根目录下生成dist目录，其中包含所有静态资源。

服务器配置要点

由于Pic-Smaller使用了前端History路由模式，需要特别注意服务器配置：

1. 单一入口设置
   需要将dist/index.html配置为二级目录的单一入口。这意味着所有匹配二级目录及其子路径的请求都应返回这个HTML文件。例如：

   • /sub
   • /sub/path
   • /sub/path/to
   • /sub/index.html 这些URL都应指向dist/index.html

2. 静态资源处理
   对于静态资源（JS、CSS、图片等），必须保持其原始访问路径不变。例如：

   • /sub/assets/test.js
   • /sub/assets/test.css
   • /sub/images/test.png

常见服务器配置示例

Nginx配置

location /sub {
    try_files $uri $uri/ /sub/index.html;
    alias /path/to/dist;
}

Apache配置

<Directory "/path/to/dist">
    RewriteEngine On
    RewriteBase /sub/
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /sub/index.html [L]
</Directory>

注意事项

1. 路径一致性
   确保Vite配置中的base值与服务器配置的二级目录路径完全一致，包括前导斜杠。

2. 开发环境测试
   在开发环境中，可以通过修改Vite配置的base值来模拟二级目录部署，方便调试。

3. 多级目录支持
   如果需要部署到更深层次的目录（如三级、四级目录），原理相同，只需相应调整base值和服务器配置即可。

通过以上配置，Pic-Smaller项目可以完美运行在二级目录下，同时保持前端路由的正常工作。这种部署方式特别适合需要在同一域名下部署多个独立前端应用的场景。