How to make a multi-page web app with Vuetify.js?

It is easy to build a multi-page app of Vue can be building by editing the vue.config.js file. But yesterday afternoon, when I was trying to build a multi-page web app with some ui structures in Vuetify.js instead of pure vue.js, one weird thing happened:

It is a two page application: the home page and signup page. When I run npm run build, the result dist folder does not contain the .html file of the second page.

SO I run some tests: here are what is happening:

1. If the home page has a filename of index.html in vue.config.js and the second page has a filename of second.html, then everything is fine.

2. If the home page has a filename of index.html in vue.config.js while the second page has a filename of /second/second.html or second/index.html. Then, the folder named second will not be created, neither does the file /second/second.html which is in it.

Does anyone have issues similar to this before, really appreciate for the helps.

Also, I notice that when it was just pure vue.js, the assets such as images will be put into a separate folder in dist. But after vuetify.js is added to the project, the only folders can appear in dist is the js and css and fonts, those image assets will be store under the folder dist. I am not sure if it is a feature of the newest vue.js version, or it is also caused by configuration of vuetify.js. Thanks for the help.

I find that all the stylesheets and javascript code for the second page is generated in folder css and js, the only one missing is the html template.

During building the app, there are no errors about cannot create the folder. All it have be printing is the warning for the asset size since I didn't import assets by part, the prints are:

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.Entrypoints:  home (1.54 MiB)      css/chunk-vendors.c6dfe063.css      js/chunk-vendors.216b9b9d.js      css/home.429de16e.css      js/home.635f35e5.js  signup (1.53 MiB)      css/chunk-vendors.c6dfe063.css      js/chunk-vendors.216b9b9d.js      css/signup.d6876e84.css      js/signup.77b83ca7.js

The home is the index file, and the second page is referening to the signup page.

module.exports = {  pages: {    home: {      entry: 'src/main.js',      template: 'public/index.html',      filename: 'index.html',      title: 'home'    },    signup: {      entry: 'src/pages/signup/main.js',      template: 'public/signup.html',      filename: '/signup/index.html',      title: 'signup page'    }  },  transpileDependencies: ['vuetify'  ]}

As you can see, I put all the html templates in the public folder. And I wish all the built html files will be named as index.html under some certain folder so I won't see html from the url of my small project.