Vue CLI“index.html”内容

Question

whenever i run npm run build it generates an dist folder with my app everything good but..每当我运行npm run build它都会生成一个带有我的应用程序的 dist 文件夹，一切都很好，但是..

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.当我打开index.html ，有<!DOCTYPE>, <head>, <body>标签，但在我的情况下，我只需要带有 CSS 和 JS 文件的<div id="app"> 。

Question:题：

Is it possible to remove the tags that i dont need to be generated like in my case <!DOCTYPE>, <body>, <head> ?是否可以删除我不需要生成的标签，例如<!DOCTYPE>, <body>, <head> ？

Whenever i run npm run build it should look like this when i open index.html :每当我运行npm run build时，当我打开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否则我需要打开文件并手动删除它

Answer 1

Vue CLI generated projects use public/index.html as a template, which contains the headers and tags you'd like to avoid. Vue CLI 生成的项目使用public/index.html作为模板，其中包含您想要避免的标题和标签。 The only element there required for Vue is <div id="app"></div> , so you could remove everything but that from public/index.html . Vue 所需的唯一元素是<div id="app"></div> ，因此您可以删除除public/index.html 。

Note that thepreload , prefetch , and CSS plugins (enabled by default) will insert a <head> .请注意，preload 、 prefetch和 CSS 插件（默认启用）将插入<head> 。 You can disable the preload and prefetch plugins with this config:您可以使用以下配置禁用preload和prefetch插件：

// 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>

Vue CLI“index.html”内容

问题描述

1 个解决方案

解决方案1
7 已采纳 2020-01-20 08:29:04

Vue CLI“index.html”内容

问题描述

1 个解决方案

解决方案1 7 已采纳 2020-01-20 08:29:04

解决方案1
7 已采纳 2020-01-20 08:29:04