Vue CLI "index.html" content

javascript vue.js vue-cli-3

10,440

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>

10,440

Admin

Updated on June 04, 2022

Comments

Admin almost 2 years
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
- Natixco over 4 years
  
  Why do you need that? I don't get it, but you could just write a script for that to delete those lines and run it after build with postbuild.
- Admin over 4 years
  
  @Natixco i am building an app on an existing website. its build with magento and it has an template that already has body, head, DOCTYPE tags
- mulsun over 4 years
  
  the hint is here: stackoverflow.com/questions/50180203/…