Question

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

Answer 1

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

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

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

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

1 个答案: