Vue3项目（vue-cli-service）如何指定非index.html的HTML模板？

针对你用 Vue CLI + Webpack 构建 Vue 3 项目，需要指定自定义 HTML 模板的需求，以下是两种场景的可行配置：

场景1：单入口项目，替换默认模板为自定义的module.html #

直接在项目根目录的vue.config.js中配置pages选项，指定入口的模板路径即可，避免之前的配置错误导致冲突：

module.exports = {
  pages: {
    index: {
      // 保持原项目的入口JS文件路径
      entry: 'src/main.js',
      // 指定你的自定义模板文件路径（示例为public目录下的module.html）
      template: 'public/module.html',
      // 可选：如果需要输出的HTML文件名为module.html，而非默认的index.html，修改此项
      filename: 'module.html'
    }
  }
}

配置后启动开发服务，若filename设为module.html，访问http://localhost:8080/module.html即可加载自定义模板；若保留filename为index.html，则直接访问原路径即可使用新模板。

场景2：多入口项目，同时保留原index.html和新增module.html #

如果需要同时维护原应用和新的复用模块，可配置两个独立入口，避免文件冲突：

module.exports = {
  pages: {
    // 原应用入口
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    // 新的复用模块入口
    module: {
      entry: 'src/module-main.js', // 为复用模块单独创建的入口JS
      template: 'public/module.html',
      filename: 'module.html'
    }
  }
}

启动服务后，可分别通过http://localhost:8080/index.html和http://localhost:8080/module.html访问两个入口。

额外注意事项 #

• 模板文件建议放在public目录下，路径需相对于项目根目录填写；
• 若需配合historyApiFallback实现路由跳转，可在devServer中添加重写规则：

  module.exports = {
    // ...pages配置
    devServer: {
      historyApiFallback: {
        rewrites: [
          { from: /^\/module/, to: '/module.html' }
        ]
      }
    }
  }
  

• 之前尝试的indexPath仅用于指定输出HTML的目录路径，无法替换模板文件，因此不适用你的需求。

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