admin管理员组

文章数量:1313182

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

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

  • javascript
  • vue.js
  • vue-cli-3
Share Improve this question asked Jan 19, 2020 at 17:37 user12531597user12531597 3
  • 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. – Natixco Commented Jan 19, 2020 at 17:42
  • @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 – user12531597 Commented Jan 19, 2020 at 17:46
  • the hint is here: stackoverflow./questions/50180203/… – mulsun Commented Jan 19, 2020 at 18:00
Add a ment  | 

1 Answer 1

Reset to default 7

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>

本文标签： javascriptVue CLI quotindexhtmlquot contentStack Overflow

版权声明：本文标题：javascript - Vue CLI &quot;index.html&quot; content - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741921469a2405027.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。