How to make the Vue single page project package a corresponding .html file for each route?

requirements: when packaging a single page project of
vue, in addition to generating a single page project, you also need to generate multiple .html files corresponding to vue routing. The code of
this batch of html is almost the same as the .vue file in pages. A single .html page can be viewed without errors.
for example:
path is the page of / index , corresponding to index.vue . When you pack it, you can generate a corresponding index.html file. The index.vue code is as follows:

<template>
  <div id="app">
      <div class="example">{{ msg }}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: "Hello world!"
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

The code in

generated index.html is:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
      .example {
         color: red;
      }
  </style>
</head>
<body>
  <div id="app">
      <div class="example">{{ msg }}</div>
  </div>
  <script>
    new Vue({
        el:"-sharpapp",
        data:{
            msg: "Hello world!"
        }
    });
  </script>
</body>
</html>

of course, this is a simple example. Third-party libraries, sub-components, css preprocessors and other issues will be involved in the actual project. Have any bosses encountered similar requirements?