如何在使用 Vue 3 使用 Vite 4 构建多页面应用程序时以标准方式处理资产/块命名？

Question

我正在使用 Vite 4.1.4/Vue 3.2.45 并尝试构建一个 Multipage App（不是在 lib 模式下）以由 ASP.NET Core 网站（使用 Razor 页面（cshtml））作为入口点提供服务.

我正在尝试将每个页面/入口点构建为一个包含所有 js 和 css 的独立文件夹，如果需要，甚至复制模块。

我在

src

文件夹中有如下目录结构：

├───assets
│      /*Asserts here*/
├───components
│       /*components here*/
├───composables
│       /*composables here*/
├───pages
│   │   ErrorNotFound.vue
|   |   /* Pages here */
│   ├───Propertylistings
│   │       propertylistings.ts
│   │       PropertyListings.vue
│   ├───Tasks
│   │       tasks.ts
│   │       Tasks.vue
│   │       TasksDetail.vue
│   │       TasksGrid.vue
│   └───Users
│           users.ts
│           Users.vue
│           UsersDetail.vue
│           UsersGrid.vue
├───router
│       taskRouter.ts
│       userRouter.ts
|       /* Others here*/
├───services
│   │   Services.ts
│   └───api
│           Api.ts
└───viewmodels
        TaskDTO.ts
        UserDTO.ts
        /* etc */

我的 vite 配置如下所示：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'url'
import glob from 'glob';
import path from 'node:path';

var inputFiles = (glob.globSync('src/pages/**/*.ts')).map(file => [
  // This remove `src/` as well as the file extension from each
  // file, so e.g. src/nested/foo.js becomes nested/foo
  path.relative(
    'src',
    file.slice(0, file.length - path.extname(file).length)
  ),
  // This expands the relative paths to absolute paths, so e.g.
  // src/nested/foo becomes /project/src/nested/foo.js
  fileURLToPath(new URL(file, import.meta.url))
]);

const outputDir = "../wwwroot/client";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue()
  ],
  build: {
    outDir: outputDir,
    emptyOutDir: true,
    manifest: "manifest.json",
    sourcemap: true,
    cssCodeSplit: false, /* 1 style file */
    rollupOptions: {
      input: Object.fromEntries(inputFiles),
      output: {
        format: "es",
        sourcemap: true,
        exports: 'named',
        assetFileNames: (assetInfo) => {
          console.log("AssertInfo %s, %s", assetInfo.name, assetInfo.type)
          let extType = assetInfo.name.split('.').pop();
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = 'img';
          }
          return `assets/[name]-[hash][extname]`;
        },
      },
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    /*Proxy settings for dev */
  }
})

这会在

outDir

中产生以下输出：

│   manifest.json
│
└───assets
    │   BusyButton-e579a0b5.js /* This name seems chosen at random */
    │   BusyButton-e579a0b5.js.map
    │   ErrorNotFound-a6c93dbd.js
    │   ErrorNotFound-a6c93dbd.js.map
    │   style-341893d8.css /* How can I change this to be split per page? And named correctly? */
    │   _plugin-vue_export-helper-175348a6.js
    │   _plugin-vue_export-helper-175348a6.js.map
    │
    └───pages
        ├───Propertylistings
        │       propertylistings-4859e993.js
        │       propertylistings-4859e993.js.map
        │
        ├───Tasks
        │       tasks-a58b1702.js
        │       tasks-a58b1702.js.map
        │
        └───Users
                users-0e4c54f0.js
                users-0e4c54f0.js.map

BusyButton

是我创建的组件之一，并被许多控件使用，我不知道为什么它作为大部分代码的主要名称。 （这是最大的文件）

如果我删除

cssCodeSplit

选项然后

style-341893d8.css

文件变成

BusyButton-341893d8.css

.

理想情况下，我希望 css 被限定范围并按页拆分（这将匹配输入数组）。如果我不能，我想预先指定主 css 输出包的名称，这样它就不会根据 Vite 生成的输出模块而改变（在这种情况下

BusyButton

）

即这个结构：

    └───pages
        ├───Propertylistings
        |       propertylistings-4859e993.css /* Css file per page input */
        │       propertylistings-4859e993.js
        │       propertylistings-4859e993.js.map
        │
        ├───Tasks
        |       tasks-a58b1702.css /* Css file per page input */
        │       tasks-a58b1702.js
        │       tasks-a58b1702.js.map
        │
        └───Users
                users-0e4c54f0.css /* Css file per page input */
                users-0e4c54f0.js
                users-0e4c54f0.js.map

谢谢！