Webpack 是否为 Vue 应用程序处理 index.html？答案

【问题标题】：Does Webpack process index.html for Vue apps?Webpack 是否为 Vue 应用程序处理 index.html？
【发布时间】：2018-08-13 05:38:32
【问题描述】：

在我的 index.html 中，head 标记中有这些：

<link rel="apple-touch-icon" sizes="60x60" href="./assets/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/icons/favicon-16x16.png">
<link rel="manifest" href="./assets/manifest.json">

但是，每当加载 index.html 时，这些资源只会再次加载为 index.html 而不是它们的图像。 Webpack 不处理 index.html 吗？有没有其他方法可以将处理后的内容放入head 标签？还是我必须把这些放在static 目录中？

【问题讨论】：

标签： javascript webpack vue.js single-page-application assets

【解决方案1】：

您必须将这些放在static 文件夹中 - 原因是index.html 从 Webpack 接收的唯一处理（在官方 Vue 模板中配置）是注入生成的 JS 和 CSS 文件。它只是忽略了您对资产的现有引用。所以你有几个选择：

继续使用来自 Vue 的官方 Webpack 模板并将您的静态资产存储在 /static 中，然后使用引用您的部署（而不是您的开发环境）的路径在 index.html 中手动引用它们
在一个或多个 Vue 单文件组件中使用您的资产 - 然后它们的相对 URL 将由 Vue-loader 处理并正确包含在您的包中。在这种情况下，您不必手动将它们包含在 index.html 中
为html-webpack-plugin 使用html-webpack-include-assets-plugin - 后者已被官方Vue 模板用于将JS 和CSS 注入index.html 您将不得不修改您的/build/webpack.prod.conf.js 并配置上述插件 - 查看它在 GitHub 上的示例

回答您的问题 - 获得哈希版本控制和压缩的唯一方法是使用相对路径从 Vue 组件引用您的资产，以便 Vue-loader 正确处理它们。

【讨论】：

你能解释一下为什么吗？如果我必须将它们放在静态文件夹中，是否仍然可以使用 webpack 的好处（比如最后的版本哈希或压缩，如果可能，删除空格等）
感谢您提供详细信息。这更有意义。对于#2，是否可以在组件中包含类似的内容？我认为像 favicon 这样的标题中的东西实际上应该在页面的源代码中。
当然，favicon 应该驻留在 index.html 中 - 在这种情况下，建议您使用选项 (1)。