VueJS如何在public/index.html中引用assets文件夹静态图片用于og meta标签

这个需求完全可以实现，不需要依赖后端服务分发资源，核心原因是你需要明确SPA构建工具对两类资源目录的处理逻辑：assets下的资源会被构建工具编译、重命名加哈希后输出，而public下的资源会原封不动复制到构建产物根目录，可通过固定路径直接访问。

现有普通SPA项目（未迁移Nuxt）的实现方法 #

方案1：直接将OG图片放到public目录（最省心，推荐） #

直接把你需要用作OG预览的图片移动到public文件夹下，比如命名为og-cover.png，之后在public/index.html里直接填写固定相对路径即可：

<meta property="og:image" content="/og-cover.png" />

• 如果你的项目部署在域名子路径下，只需要把路径前缀和你配置的构建base参数对齐即可，比如子路径是/app，就写成/app/og-cover.png
• public下的资源构建时不会被修改文件名/路径，完全适配硬编码需求

方案2：必须保留图片在assets目录的处理方法 #

如果你的资源管理规则要求图片必须放在assets目录下，可以用构建工具的HTML插值能力自动替换路径：

• Vite环境下的写法：

  <meta property="og:image" content="<%= new URL('./src/assets/og-cover.png', import.meta.url).href %>" />
  

• Webpack（搭配html-webpack-plugin）环境下的写法：

  <meta property="og:image" content="<%= require('./src/assets/og-cover.png') %>" />
  

构建时工具会自动把插值代码替换为assets图片打包后的实际带哈希的路径，无需手动修改。

迁移到Nuxt.js静态站后的实现方法 #

等你切换到Nuxt.js生成纯静态站时，两种方案都可直接兼容：

• 沿用public目录的方案：把OG图片放在public目录下，直接在nuxt.config.ts或者页面的useHead配置中填写路径即可，nuxt generate生成静态产物时路径会完全保留
• 放在assets目录的方案：直接通过~/assets/og-cover.png的路径引用即可，Nuxt会自动处理为正确的静态资源路径

补充注意事项 #

部分社交平台的OG抓取规则要求图片路径为带域名的完整绝对路径，建议直接写死你站点的正式域名，比如：

<meta property="og:image" content="https://your-domain.com/og-cover.png" />

纯静态站点部署后无需任何后端服务即可正常访问该资源。

内容的提问来源于stack exchange，提问作者Gradient