在Vue的public / index.html挂载中引用哈希文件

问题描述

我正在尝试将OGP元标记添加到相对简单的Vue.js应用程序中。我将其“托管”在GitHub页面上，因此无法在服务器端进行渲染，所提供的index.html页面总是 静态。

我想添加一个图像元标记，如下所示：

<meta property="og:image" content="https://example.com/img/some_image.jpeg">

通常，这不会有问题，但是Vue.js会将哈希添加到所有文件名（包括静态图像）中。

因此上面的标签实际上将如下所示：

<meta property="og:image" content="https://example.com/img/some_image.09c37fe6.jpeg">

每次构建时，我都可以编辑此哈希，但是这很愚蠢，如果我决定使用自动构建系统，那将是行不通的。那么，Vue.js是否包括任何自动找出任何给定文件哈希值的方法？

我认为这可能与<link rel="icon" href="<%= BASE_URL %>favicon.ico">插入的vue-cli标签有关，但是我无法弄清楚到底是什么提供了此功能，以及是否可以使用。 / p>

我知道禁用散列是一种选择，但是我很好奇是否有可以让我保留散列的解决方案。

解决方法

没想到我会立即回答我自己的问题，看来我已经知道了。抱歉，对于一般的Web开发人员来说，像这样的事情应该是显而易见的。

只需插入

require('./path/image.ext')

生成的文件仍然使用哈希，如果您在实际的src文件夹中使用这些文件，则相对路径也可以使用：

<!-- Inside ./public/index.html-->
<!-- Accesses ./public/spirit.jpg -->
<meta property="og:image" content="<%= require('./img/spirit.jpg') %>">
<!-- Accesses ./src/assets/spirit.jpg -->
<meta property="og:image" content="<%= require('../src/assets/spirit.jpg') %>">