Menu
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
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>
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
