如何在Vite构建中保留摄影作品集的文件夹结构？

你的需求完全可以实现，核心是调整构建工具的资源输出配置，同时配合元数据和部署策略的微调，以下是具体方案：

一、修改构建工具的资源输出规则 #

1. Vite 配置 #

在vite.config.js中调整build选项，让资源按源文件夹结构输出：

export default {
  build: {
    assetsDir: 'Collections', // 对应源目录的根节点
    rollupOptions: {
      output: {
        // 自定义资源文件名规则，保留原路径结构
        assetFileNames: (assetInfo) => {
          // 去掉构建时自动添加的前缀（比如src/）
          const rawPath = assetInfo.name.split('?')[0].replace(/^src\/Collections\//, '');
          // 可选：保留哈希后缀（用于缓存），如果不需要可以直接返回`Collections/${rawPath}`
          return `Collections/${rawPath.replace(/(\.\w+)$/, '-[hash]$1')}`;
        }
      }
    }
  }
}

2. Webpack 配置 #

在webpack.config.js中设置assetModuleFilename来保留路径：

module.exports = {
  output: {
    // 直接按源路径输出资源，可选添加哈希
    assetModuleFilename: 'Collections/[path][name]-[hash][ext]'
    // 如果不需要哈希，改成：'Collections/[path][name][ext]'
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp)$/i,
        type: 'asset/resource'
      }
    ]
  }
};

二、调整自定义生成的index.ts元数据 #

确保自动生成的index.ts里，图片路径使用相对路径而非绝对路径。比如在Collection1/Album1/index.ts中，图片路径写./Photo1，这样构建后路径会自动对应到输出的Collections/Collection1/Album1/Photo1结构。

三、部署时用增量上传减少传输量 #

即使构建后保留了结构，部署时可以用工具只传变化的文件：

• 用rsync命令：rsync -av --delete ./build/ your-server:/your/deploy/path/，它会对比本地和服务器文件，只传输新增或修改的内容。
• 可视化FTP工具（如FileZilla）开启“仅上传修改过的文件”选项，避免重复上传20GB的存量图片。

四、缓存问题的处理（可选） #

如果去掉哈希后缀，要注意浏览器缓存：

• 在index文件的图片链接后加版本参数，比如<img src="./Photo1?v=20240520">，更新图片时修改版本号即可强制刷新。
• 在服务器端配置图片的缓存策略，设置较短的缓存过期时间，或者启用ETag对比文件是否更新。

这不是构建工具的不可避免缺陷，通过以上调整就能实现你想要的：保留源文件夹结构，后续仅上传新增图片和更新的index文件，平衡成本、性能与复杂度。

内容的提问来源于stack exchange，提问作者Ksisa