Vue-cli: Use template file other than index.html

Question

I am running a Vue 3 application using the vue-cli-service (webpack, no vite yet).

Because I want to re-use some of the code for a separate application, I need to create a separate HTML tempate file (e.g. module.html) to mount the application in.

However, it seems that the vue-cli and/or the webpack configuration do not let me specify a different html file to use as a template. The only filename that works is index.html.

How can I tell my application using the vue.config.js file or vue-cli-service command line to use a different html file as a template to inject the appliction in?

---

This is what I already tried:

1) setting the indexPath property

// in vue.config.js

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

Result: No change, index.html is still being used to render the page.

2) Using historyApiFallback

// in vue.config.js

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

Result: No change, index.html is still being used to render the page.

3) using the pages property

Using the pages property should allow me to configure the html-webpack-plugin to use a different file.

// in vue.config.js

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

Result: This creates the following error in the console:

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

Which makes me think, there must be a way outside of pages to set a different filename, which the application is trying to use. I don't see it however and have no idea where to look any more.

Answer 1

Correct me if I'm wrong. You are trying to create multiple layout for your Vue application right?

If that is the case, you should use vue-router nested routes to create an actual layout.

You can look at here for more detail https://stackblitz.com/edit/vue-t1uatq

Answer 2

Did you tried to give absolute path to your html file here

1. setting the indexPath property

// in vue.config.js

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