Vite.js构建MPA时如何缩减HTML输出目录层级去除pages路径段

当前配置将root设置为src目录，Vite 处理多页应用入口时，默认会以入口 HTML 文件相对于root的目录结构，生成开发服务访问路径和生产构建输出路径。你的页面模板都存放在src/pages/目录下，相对于root（src）的路径为pages/[页面名]/index.html，因此最终路径会自带多余的pages层级。

无需调整现有root配置，直接修改build.rollupOptions.input的键名，将键名设置为你期望的最终访问/输出路径即可，Vite 会直接按照键名映射路由、生成输出文件结构。

修改后的rollupOptions配置段：

rollupOptions: {
  input: {
    // 键名即为最终路径，值指向实际存放的HTML文件绝对路径
    'list/index.html':   path.resolve(pageDir, 'list/index.html'),
    'filter/index.html': path.resolve(pageDir, 'filter/index.html'),
    'result/index.html': path.resolve(pageDir, 'result/index.html'),
    'search/index.html': path.resolve(pageDir, 'search/index.html'),
  }
},

配置生效后：

• 开发服务启动后，直接访问 http://localhost:[端口]/list/index.html 即可打开对应页面，路径不再包含pages层级
• 生产构建产物中，dist目录下会直接生成list/、filter/、result/、search/四个目录，每个目录下的index.html路径完全符合/[页面名]/index.html的预期

补充说明 #

如果修改后copy插件提示找不到src/lib目录，是因为vite-plugin-copy默认以配置的root（即src目录）为基准查找源文件，将copy配置的源路径调整为相对src的路径即可：

copy({
  targets: [{ src: 'lib/**/*', dest: 'dist/lib' }],
  hook: 'writeBundle'
}),

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