Vite多页面应用：如何将资源打包到对应子目录？

要实现将单个页面的所有资源打包到对应页面目录下的assets文件夹中，你需要修改Vite配置里的Rollup输出规则，指定资源文件的输出路径与入口名称绑定。

修改后的vite.config.ts如下：

import { defineConfig } from 'vite'
import { splitVendorChunkPlugin } from 'vite'
import { resolve } from 'path';
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react(), splitVendorChunkPlugin()],
  build: {
    rollupOptions: {
      input: {
        app: resolve(__dirname, './app/index.html'),
        // 后续添加第二个页面时，只需在这里新增入口
        // admin: resolve(__dirname, './admin/index.html'),
      },
      output: {
        // 入口JS文件输出路径：对应入口目录下的assets文件夹
        entryFileNames: '[name]/assets/[name].[hash].js',
        // 公共chunk（如vendor）输出路径：绑定到对应入口的assets文件夹
        chunkFileNames: '[name]/assets/vendor.[hash].js',
        // 静态资源（如图片、CSS）输出路径：对应入口目录下的assets文件夹
        assetFileNames: '[name]/assets/[name].[hash][extname]',
      },
    },
  },
})

配置说明 #

• entryFileNames：控制入口JS文件的输出路径，[name]会替换为你在input中定义的入口名称（比如这里的app），最终输出到dist/app/assets/下。
• chunkFileNames：控制拆分出的公共chunk（如vendor.js）的输出路径，同样绑定到对应入口的assets文件夹中。
• assetFileNames：控制所有静态资源（CSS、图片、字体等）的输出路径，确保它们也被放到对应入口的assets目录下。

多页面扩展 #

当你添加第二个页面（比如admin）时，只需在input中新增入口配置，打包后该页面的所有资源会自动输出到dist/admin/assets/目录下，完全满足你分别部署到不同域名的需求。

关于公共资源共享 #

如果希望多个页面共享公共chunk（避免重复打包），可以将chunkFileNames调整为assets/vendor.[hash].js，这样公共资源会输出到dist/assets/根目录下，所有页面都可以引用该路径下的资源。

内容的提问来源于stack exchange，提问作者Mikey A. Leonetti