基于Vite配置Rollup，生成带独立资源的分离应用构建包

项目目录结构 #

先明确当前的源文件结构，确保配置匹配：

src/
├── common-assets/       # 全局共享资源
│   ├── css/global.css
│   └── js/utils.js
└── sections/
    ├── section-a/
    │   ├── app-1/       # 独立应用1
    │   │   ├── app-assets/  # 应用专属资源
    │   │   │   ├── img/logo.png
    │   │   │   └── css/app1.css
    │   │   ├── main.js      # 应用入口
    │   │   └── index.html   # 应用页面
    │   └── app-2/       # 独立应用2
    │       ├── app-assets/
    │       ├── main.js
    │       └── index.html
    └── section-b/
        └── app-3/       # 独立应用3
            ├── app-assets/
            ├── main.js
            └── index.html

配置步骤 #

1. 安装必要插件

需要用到vite-plugin-static-copy来复制全局资源到每个应用目录：

npm install vite-plugin-static-copy --save-dev

2. 编写Vite配置文件（vite.config.js）

核心是配置多入口、自定义输出路径，以及复制全局资源：

import { defineConfig } from 'vite';
import { staticCopy } from 'vite-plugin-static-copy';
import fs from 'fs';
import path from 'path';

// 自动遍历sections下的所有独立应用，生成Rollup入口配置
const getEntries = () => {
  const entries = {};
  const sectionsDir = path.resolve(__dirname, 'src/sections');
  
  // 遍历所有section分组
  fs.readdirSync(sectionsDir, { withFileTypes: true })
    .filter(dir => dir.isDirectory())
    .forEach(section => {
      const sectionPath = path.join(sectionsDir, section.name);
      
      // 遍历当前section下的所有应用
      fs.readdirSync(sectionPath, { withFileTypes: true })
        .filter(dir => dir.isDirectory())
        .forEach(app => {
          const appEntryHtml = path.join(sectionPath, app.name, 'index.html');
          if (fs.existsSync(appEntryHtml)) {
            // 入口键格式：section名称/应用名称，对应输出路径
            entries[`${section.name}/${app.name}`] = appEntryHtml;
          }
        });
    });
  
  return entries;
};

export default defineConfig({
  build: {
    emptyOutDir: true, // 构建前清空dist目录
    rollupOptions: {
      input: getEntries(), // 注入自动生成的多入口配置
      output: {
        // 入口文件输出到对应应用目录下，命名为bundle.js
        entryFileNames: '[name]/bundle.js',
        // 代码拆分后的chunk文件输出到应用的app-assets目录
        chunkFileNames: '[name]/app-assets/[hash].js',
        // 静态资源（样式、图片等）输出到应用的app-assets目录
        assetFileNames: '[name]/app-assets/[hash][extname]',
        outputDir: 'dist'
      }
    }
  },
  plugins: [
    // 复制common-assets到每个应用的目录下
    staticCopy({
      targets: [
        {
          src: 'src/common-assets/**/*',
          dest: ({ filePath }) => {
            // 为每个应用生成common-assets的复制路径
            const entryKeys = Object.keys(getEntries());
            return entryKeys.map(key => `${key}/common-assets${filePath.replace('src/common-assets', '')}`);
          }
        }
      ]
    })
  ]
});

3. 调整应用内的资源引用路径

确保每个应用的index.html和main.js中使用相对路径引用资源，比如：

• app-1/index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>App 1</title>
  <!-- 引用全局共享资源 -->
  <link rel="stylesheet" href="./common-assets/css/global.css">
  <!-- 引用应用专属资源 -->
  <link rel="stylesheet" href="./app-assets/css/app1.css">
</head>
<body>
  <div id="app"></div>
  <!-- 应用入口脚本 -->
  <script type="module" src="./main.js"></script>
</body>
</html>

• app-1/main.js：

import './app-assets/css/app1.css';
import '../common-assets/js/utils.js';

// 应用逻辑代码
console.log('App 1 running');

构建后输出结构 #

执行npm run build后，dist目录会生成符合要求的结构：

dist/
├── section-a/
│   ├── app-1/
│   │   ├── bundle.js          # 应用入口bundle
│   │   ├── index.html         # 应用页面
│   │   ├── app-assets/        # 应用专属资源（编译后）
│   │   │   ├── abc123.js      # 拆分的chunk文件
│   │   │   ├── def456.css     # 编译后的样式
│   │   │   └── logo.png       # 应用图片资源
│   │   └── common-assets/     # 复制过来的全局共享资源
│   │       ├── css/global.css
│   │       └── js/utils.js
│   └── app-2/
│       ├── bundle.js
│       ├── index.html
│       ├── app-assets/
│       └── common-assets/
└── section-b/
    └── app-3/
        ├── bundle.js
        ├── index.html
        ├── app-assets/
        └── common-assets/

每个应用目录下包含了运行所需的所有文件，可以独立部署或运行。

内容的提问来源于stack exchange，提问作者Сергей Язев