如何调整Vite的HTML文件输出路径至指定目录？

你已经通过修改entryFileNames调整了JS文件的输出路径，但HTML文件属于Vite处理的入口资产，默认会保留其相对于Vite root的路径结构（你的root设置为src，所以输出到dist/src/pages下）。要调整HTML的输出路径，需要在rollupOptions.output.assetFileNames中针对HTML文件单独配置。

解决方案步骤： #

1. 确保你已经将entryFileNames修改为目标路径：

entryFileNames: "pages/[name]/index.js",

2. 修改assetFileNames函数，添加HTML文件的路径处理逻辑：

assetFileNames: (assetInfo) => {
  const { name: _name, ext } = path.parse(assetInfo.name);
  
  // 单独处理HTML入口文件
  if (ext === '.html') {
    return `pages/[name]/index.html`;
  }

  // 原有资产文件（样式、图片等）的处理逻辑保持不变
  const { dir } = path.parse(assetInfo.name);
  const assetFolder = dir.split("/").at(-1);
  const name = assetFolder + firstUpperCase(_name);
  return `assets/[ext]/${name}.chunk.[ext]`;
},

说明： #

• [name]对应你在rollupOptions.input中为HTML入口定义的键名（如devtools、panel等），所以每个入口会生成对应的pages/[name]子目录。
• 修改后构建，HTML文件会输出到dist/pages/[name]/index.html，JS文件会在同目录下，完全符合你的期望路径：

  /dist/pages/index.js
  /dist/pages/index.html
  

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