如何配置Vite Rollup将字体文件输出到dist/font目录？

要实现仅将字体文件输出到/dist/font目录，其他资源保留在dist根目录，你可以利用Rollup的函数式assetFileNames配置，根据文件扩展名区分资源类型：

修改vite.config.js中build.rollupOptions.output部分的assetFileNames配置，将原字符串替换为带判断逻辑的函数：

import { resolve } from 'path'
import { terser } from 'rollup-plugin-terser'
import inject from '@rollup/plugin-inject'

export default {
    base: './',
    build: {
        rollupOptions: {
            input: {
                app: resolve(__dirname, 'src/js/app.js'),
                a: resolve(__dirname, 'src/scss/theme-a.scss'),
                b: resolve(__dirname, 'src/scss/theme-b.scss'),
                c: resolve(__dirname, 'src/scss/theme-c.scss')
            },
            output: {
                // 函数式配置，区分字体与其他资源
                assetFileNames: (assetInfo) => {
                    // 定义字体文件扩展名集合
                    const fontExts = new Set(['woff', 'woff2', 'ttf', 'eot', 'otf']);
                    const ext = assetInfo.name.split('.').pop();
                    return fontExts.has(ext) ? 'font/[name].[ext]' : '[name].[ext]';
                },
                chunkFileNames: '[name].js',
                entryFileNames: '[name].js'
            },
            plugins: [
                inject({
                    modules: {
                        $: 'jquery',
                        jQuery: 'jquery'
                    }
                }),
                terser({
                    format: {
                        comments: false
                    }
                })
            ]
        }
    }
}

关键逻辑说明： #

• 函数接收assetInfo参数，通过assetInfo.name获取资源文件名
• 校验文件扩展名是否属于字体格式，分别设置输出路径：
  • 字体文件：输出至dist/font/目录
  • CSS等其他资源：保留在dist根目录

构建后，字体文件会自动归类到dist/font目录，CSS、JS文件仍留在dist根目录，不会出现所有资源被统一放入font目录的问题。

内容的提问来源于stack exchange，提问作者EmWe