Vue-cli：使用除index.html之外的模板文件

Question

我正在使用 vue-cli-service 运行 Vue 3 应用程序（webpack，还没有 vite）。

因为我想为单独的应用程序重复使用一些代码，所以我需要创建一个单独的 HTML 模板文件（例如

module.html

）来安装应用程序。

但是，vue-cli 和/或 webpack 配置似乎不允许我指定不同的 html 文件用作模板。唯一有效的文件名是

index.html

。

如何使用

vue.config.js

文件或

vue-cli-service

命令行告诉我的应用程序使用不同的 html 文件作为模板来注入应用程序？

---

这是我已经尝试过的：

1) 设置

indexPath

属性

// in vue.config.js

defineConfig({
  indexpath: "module.html"
  //...
})

结果：没有变化，

index.html

仍在用于渲染页面。

2) 使用

historyApiFallback

// in vue.config.js

defineConfig({
  devServer: {
    historyApiFallback: {
      index: "module.html",
    }
    // ...
  }
  // ...
})

结果：没有变化，

index.html

仍在用于渲染页面。

3) 使用

pages

属性

使用

pages

属性 应该允许我 配置

html-webpack-plugin

以使用不同的文件。

// in vue.config.js

defineConfig({
  pages: {
    index: {
      entry: "src/module.js",
      template: "module.html",
    }
  }
  // ...
})

结果：这会在控制台中产生以下错误：

Conflict: Multiple assets emit different content to the same filename index.html

这让我想到，必须有一种在

pages

之外的方法来设置应用程序尝试使用的不同文件名。然而我没有看到它，也不知道该去哪里再看。

Answer 1

如果我错了，请纠正我。您正在尝试为您的 Vue 应用程序创建多个布局吗？

如果是这种情况，您应该使用

vue-router

嵌套路由来创建实际布局。

您可以在这里查看更多详细信息https://stackblitz.com/edit/vue-t1uatq