如何讓 css assets 的檔名對齊 pages 的 name？

[ItsTiffanyChen]

首先感謝大大開發這個套件給大家使用🙏 有遇到一個困惑，困擾了好幾天，但不確定是否和此套件的設定有關聯，因此想請教一下 以下是我的 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { createMpaPlugin } from "vite-plugin-virtual-mpa";
import { splitVendorChunkPlugin } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(), 
    createMpaPlugin({
      pages: [
        {
          name: "test-index",
          template: "./templates/test/index/index.html",
          entry: resolve(__dirname, "./src/pages/test/index/index.js"),
          filename: "test/index/index.html"
        },
        {
          name: "test-main",
          template: "./templates/test/main/index.html",
          entry: resolve(__dirname, "./src/pages/test/main/index.js"),
          filename: "test/main/index.html"
        }
      ]
    }),
    splitVendorChunkPlugin()
  ],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "assets/js/[name].[hash].js",
        assetFileNames: "assets/css/[name].[hash][extname]",
        chunkFileNames: ({ name }) => {
          // console.log('chunkFileNames', name)
          const filename = name === "vendor" ? "vendor" : "shared"
          return `assets/js/${filename}.[hash].js`
        },
      }
    }
  }
})

目前 yarn build 後的結果如下：

其中 dist/assets/css/index.4a300418.css 以及 dist/assets/css/index.5ade7a68.css 是兩個 page 分別的 css 但我希望的是 css 的檔名也是對齊 pages 的 name，和產出的 js 一致，也就是 dist/assets/css/test-index.4a300418.css 和 dist/assets/css/test-main.5ade7a68.css 不確定是否有辦法使用此 plugin 設定完成？謝謝！ example repo: https://github.com/ItsTiffanyChen/vite-test

[emosheeep]

插件内部生成最终 html 文件路径的逻辑涉及虚拟文件，具体可以看 README 里的介绍，用户的感知也就是可以通过 filename 选项来映射最后生成的 html 文件路径。 除此之外没有别的逻辑了，你这里配置的这些 rollupOptions 就是 rollup 自身的行为以及可能还有一些 vite 封装后的默认行为。

[ItsTiffanyChen]

好的了解 感恩！