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

Does Webpack process index.html for Vue apps?

在我的 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 目录中吗？

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

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

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