修改 Vite/Rollup 中资产的构建路径？

Question

假设我有这个文件夹结构：

parent
|-parent.html
|-parent.js
|-child
|--child.html
|--child.js

我希望它们在我的 dist 文件夹中以相同的结构输出。 默认情况下，这是获得输出的内容：

dist/assets/parent.js
dist/assets/child.js

我希望他们像这样输出：

dist/parent/parent.js
dist/parent/child/child.js

我尝试更改 Rollup 的assetFileNames选项，但它没有做任何事情。

Answer 1

输出文件名在 Rollup 中使用build.rollupOptions进行配置。 设置output.entryFileNames以配置入口.js文件的位置以匹配其原始目录结构：

// vite.config.js
import { fileURLToPath } from 'url';
import { defineConfig } from 'vite';
import path from 'path';

const rootDir = fileURLToPath(new URL('.', import.meta.url));

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        parent: './parent/parent.html',
        child: './parent/child/child.html',
      },
      output: {
        entryFileNames: (assetInfo) => {
          // assetInfo.facadeModuleId contains the file's full path
          if (assetInfo.facadeModuleId) {
            const assetPath = path.dirname(assetInfo.facadeModuleId).replace(rootDir, '');
            return assetPath + '/[name]-[hash].js';

          } else {
            return 'assets/js/[name]-[hash].js';
          }
        },
      },
    },
  },
});

演示

笔记

• 资产（例如.css文件）和共享模块（供应商.js块）无法使用上述解决方案重定向，因为来自相关挂钩的资产信息不提供文件的完整路径。

• 在一个普通的 Rollup 项目中， output.preserveModules=true会实现最初的目标，但是该选项与 Vite 自己的 Rollup 设置冲突。