在 Vue 的 public/index.html 挂载中引用散列文件

Question

我正在尝试将 OGP 元标记添加到我相对简单的 Vue.js 应用程序中。我在 GitHub 页面上 'hosting' 它，因此它不能在服务器端呈现，服务的 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 是否包括自动计算任何给定文件的哈希值的任何方法？

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

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

Answer 1

没想到马上就回答了我自己的问题，看来我已经想通了。抱歉，如果像这样的东西对于普通的 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') %>">

在 Vue 的 public/index.html 挂载中引用散列文件

Referencing hashed files in Vue's public/index.html mount

meta

meta-tags

github-pages

vue.js