Vue CLI "index.html" content

whenever i run npm run build it generates an dist folder with my app everything good but..

My Problem:

When i open my index.html there are<!DOCTYPE>, <head>, <body> tags but in my case i just need the <div id="app"> with the CSS and JS files.

Question:

Is it possible to remove the tags that i dont need to be generated like in my case <!DOCTYPE>, <body>, <head>?

Whenever i run npm run build it should look like this when i open index.html:

<link href=/testing/path/css/app.6878f4f8.css rel=preload as=style>
<link href=/testing/path/js/app.457dc9d3.js rel=preload as=script>
<link href=/testing/path/js/chunk-vendors.a0cfb1f1.js rel=preload as=script>
<link href=/testing/path/css/app.6878f4f8.css rel=stylesheet>
 <div id=app>
 </div>
<script src=/testing/path/js/chunk-vendors.a0cfb1f1.js></script>
<script src=/testing/path/js/app.457dc9d3.js></script>

Otherwise i need to open the file and remove it manually

Solution

Vue CLI generated projects use public/index.html as a template, which contains the headers and tags you'd like to avoid. The only element there required for Vue is <div id="app"></div>, so you could remove everything but that from public/index.html.

Note that the preload, prefetch, and CSS plugins (enabled by default) will insert a <head>. You can disable the preload and prefetch plugins with this config:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugins.delete('prefetch')
    config.plugins.delete('preload')
  }
}

The final output would be similar to this:

<head><link href=/css/app.e2713bb0.css rel=stylesheet></head>
<div id=app></div>
<script src=/js/chunk-vendors.327f60f7.js></script>
<script src=/js/app.fb8740dd.js></script>