Vite：根据目录名设置`assetFileName`

Question

鉴于下面的项目结构，Vite 会将两个 CSS 文件输出为

index.<hash>.css

，这使得它们难以调试。如果文件名是

index

:

，我想更改配置以使用目录名

src/
--pages/
----Home/
------index.jsx
------style.css
----NotFound/
------index.jsx
------style.css

不幸的是，

assetFileNames

的参数似乎缺乏有关源位置的可用信息。

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

export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                assetFileNames: (assetInfo) => {
                    console.log(assetInfo);
                    return 'assets/[name]-[hash][extname]';
                },
            }
        }
    }
});

{
  name: 'index.css',
  source: '<My CSS content>',
  type: 'asset'
}

有什么方法可以从

assetInfo

获取更多上下文，例如原始文件路径吗？

例如，

chunkFileNames

获取

facadeModuleId

属性，其中包含原始文件路径，这在这里非常有用；它确保

NotFound/index.jsx

输出为

NotFound-<hash>.js

，而不是

index-<hash>.js

:

chunkFileNames: (assetInfo) => {
    const name = assetInfo.name == 'index'
        ? path.basename(path.dirname(assetInfo.facadeModuleId))
        : assetInfo.name;
    return `${name}-[hash].js`;
}

Answer 1

看来这是不可能的：https://github.com/rollup/rollup/issues/4724