Skip to content
Advertisement

Vue CLI – combine build output to a single html file

I have a vue project created with vue-cli. The normal output when running yarn build is a dist folder with an index.html and a js and css sub-directory with the corresponding .js and .css files.

I want the build output to be a single html file that contains the js and css.

I added a vue.config.js file in the root of my project and set it to output a single js file and that is working ok. But I want to only have a single html file with the js and any css already on the html file.

JavaScript

Basically I want my html file to be something like this:

JavaScript

Is this possible?

Using Vue 3.9.3

Advertisement

Answer

Someone answered with a suggestion to look into html-webpack-inline-source-plugin but removed their answer. But that was exactly what I needed to get this done.

The plugin is not Vue or Vue-CLI specific but it works if you do the following:

1) Add a vue.config.js file in the root of the app.

2) The linked plugin above is actually an extension of another package. You need both.

JavaScript

3)

JavaScript

4) Add a template. This is necessary for working in the Vue context because without this the output html file by default won’t have the necessary <div id="app"></div> and Vue won’t mount to anything. I basically took the normal output html file and modified it a little.

JavaScript

Then build like normal and the output.html file will be in the /dist folder

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement