How do I get Vue CLI to use an external HTML file with hot reloading?

Question

I've used the default vue-cli to scaffold a Vue project. I'd like to use the Vue application in the context of a different HTML file.

I have a file called dashboard.html is served by the application at localhost:8000. The Vue CLI serves everything at localhost:3000. My HTML file normally includes scripts from /public/scripts/. Therefore, the Vue project should be included from /public/scripts/myproject.js

How would I configure my Vue project so that the actual files are generated into the location mentioned above and I'm able to use my custom HTML file? With a scenario like this, is it still possible to achieve hot-code reloading as the default Vue scaffolding provides?

Also looking for a solution here. I think when you use the dev server the files are not actually built on the file system, but rather are in-memory. In my case I have a server-rendered html file that has some in-page global variables (like site features, current user, and a routing map) so the template needs to be populated by a server render before the vue app bootstraps into it. — Askdesigners

onuriltan onuriltan · Accepted Answer · 2019-03-21T21:37:41

I think you can achieve your solution by using iframe

<iframe id="theIframe" src="http://localhost:8080" ></iframe>

In case of hot-reloading, if your app that runs on localhost:8080 has the hot-reload functionality, than it can hot reload on iframe

How do I get Vue CLI to use an external HTML file with hot reloading?

1 Answers