如何配置Vite实现图片资源从另一域名加载，其余资源走原域名？

Vite完全支持这种按资源类型拆分域名加载的需求，无需依赖Nginx重定向，直接通过构建配置即可实现，避免额外的HTTP请求开销。

核心配置思路 #

通过Vite的Rollup构建配置，针对图片类资源单独设置对应的域名（siteb.com），其余资源默认使用主域名（sitea.com）。具体配置如下：

import { defineConfig } from 'vite'

export default defineConfig({
  // 非图片资源默认使用sitea.com作为基础域名
  base: 'https://sitea.com/',
  build: {
    rollupOptions: {
      output: {
        // 对图片资源单独归类到assets/images目录
        assetFileNames: (assetInfo) => {
          const ext = assetInfo.name.split('.').pop();
          // 匹配常见图片格式，可根据需求扩展
          if (/png|jpe?g|gif|webp|svg|ico/.test(ext)) {
            return 'assets/images/[name].[hash][extname]';
          }
          // 其他资源沿用默认目录结构
          return 'assets/[name].[hash][extname]';
        },
        // 根据资源类型动态设置publicPath
        publicPath: (chunk) => {
          // 判断当前资源是否为图片资源
          if (chunk.type === 'asset' && chunk.fileName.startsWith('assets/images/')) {
            return 'https://siteb.com/';
          }
          // 非图片资源使用主域名
          return 'https://sitea.com/';
        },
        // 可选：统一JS/CSS资源的目录结构
        chunkFileNames: 'assets/js/[name].[hash].js',
        entryFileNames: 'assets/js/[name].[hash].js'
      }
    }
  }
});

配置说明 #

1. base配置：设置所有非特殊资源的默认加载域名，这里指定为https://sitea.com/。
2. assetFileNames：将图片资源单独打包到assets/images/目录，方便后续通过路径判断资源类型。
3. publicPath函数：根据资源的类型和路径，动态返回对应的域名。图片资源会自动使用https://siteb.com/，其余资源使用主域名。

注意事项 #

• 确保两个域名的服务器上，构建后的资源路径完全一致（即sitea.com和siteb.com的assets/目录内容完全相同）。
• 图片格式的正则表达式可根据实际使用的格式扩展（如添加avif等）。
• 开发环境下若需测试该配置，可同步设置server.origin，但通常生产构建阶段才需要启用多域名拆分。

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