项目构建时如何将pages文件夹下的HTML文件输出到dist根目录？

要把pages文件夹里的HTML文件构建后放到dist根目录，只需修改rollup配置里的output.assetFileNames规则，增加对HTML文件的特殊处理：

rollupOptions: {
      input: {
        ...Object.fromEntries(
          glob.sync(resolve(root, 'pages', '*.html')).map((filepath) => {
            const { base, name } = parse(filepath);
            return [name, resolve(root, 'pages', base)];
          })
        ),
        main: resolve(root, 'index.html'),
      },
      output: {
        assetFileNames: ({ name }) => {
          // 新增：判断是否为HTML文件，直接输出到根目录
          if (/\.html$/.test(name)) {
            return '[name][extname]';
          }
          
          let directory = '';
          if (/\.woff2?/.test(name)) {
            directory = 'fonts';
          }

          directory += directory ? '/' : '';
          return `assets/${directory}[name][extname]`;
        },
        entryFileNames: '[name].js',
        chunkFileNames: 'assets/[name].js',
      },
    },

说明 #

• 新增的判断逻辑会识别HTML文件，直接将其输出到dist根路径下，不会放到assets文件夹中
• 原有字体、JS等资源的输出规则保持不变，依然按配置输出到对应目录

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