Vue CLI "index.html" 内容

Question

每当我运行 npm run build 它生成一个 dist 文件夹与我的应用程序一切都很好但是..

我的问题：

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

问题：

是否可以像我的情况一样删除不需要生成的标签<!DOCTYPE>, <body>, <head>？

每当我运行 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>

否则我需要打开文件并手动删除它

Answer 1

Vue CLI 生成的项目使用 public/index.html 作为模板，其中包含 headers 和您希望避免的标签。 Vue 唯一需要的元素是 <div id="app"></div>，因此您可以删除除 public/index.html.

之外的所有元素

请注意 preload, prefetch 和 CSS 插件（默认启用）将插入 <head>。您可以使用此配置禁用 preload 和 prefetch 插件：

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

最终输出类似于：

<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" 内容

Vue CLI "index.html" content

javascript

vue.js

vue-cli-3