Vite - 空资产文件夹（不是整个outputDir）

Question

由于其他构建服务（例如来自正在使用的 CMS）也将文件放在同一文件夹中，因为outPutDir我只需要清空资产文件夹。同时，我想通过仅指定来保留默认的文件夹结构outPutDir

Vite 可以实现吗？

我在 Vite 的文档中没有找到任何相关内容。然而，这并不意味着它没有在某处被提及。

  build: {
    outDir: '../wwwroot/',
    emptyOutDir: true,
    rollupOptions: {
      output: {
        chunkFileNames: 'assets/js/[name].[hash].js',
        entryFileNames: 'assets/js/[name].[hash].js',

        assetFileNames: ({name}) => {
          if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')) {
            return 'assets/images/[name].[hash][extname]';
          }

          if (/\.css$/.test(name ?? '')) {
            return 'assets/css/[name].[hash][extname]';
          }

          return 'assets/[name].[hash][extname]';
        },
      },
    },
  },

Answer 1

只需vite.config.js创建一个 Rollup 插件即可删除钩子中的资产文件夹buildStart：

import { defineConfig } from 'vite'
import { resolve } from 'path'
import { rm } from 'node:fs/promises'

export default defineConfig({
  plugins: [{
    name: "Cleaning assets folder",
    async buildStart() {
      await rm(resolve(__dirname, '../wwwroot/assets'), { recursive: true, force: true });
    }
  }],
  build: {
    // ...
  }
}

文档：

• https://vitejs.dev/config/shared-options.html#plugins
• https://rollupjs.org/guide/en/#buildstart
• https://nodejs.org/api/fs.html#fsrmpath-options-callback

Answer 2

我的解决方案是重新路由 CMS 从前端构建中获取资产文件的位置。

它没有解决我最初的挑战，但它解决了我的问题。

  build: {
    outDir: '../wwwroot/public/',
    sourcemap: true,
    manifest: true,
    reportCompressedSize: true,
    emptyOutDir: true,
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name].[hash].js',
        entryFileNames: 'js/[name].[hash].js',

        assetFileNames: ({ name }) => {
          if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')) {
            return 'images/[name].[hash][extname]';
          }

          if (/\.css$/.test(name ?? '')) {
            return 'css/[name].[hash][extname]';
          }

          return '[name].[hash][extname]';
        },
      },
    },
  },