vue引用public文件夹中文件

作者：System 时间：2024年08月14日分类：所有,vue.js 字数：517

这篇文章距离上次修改已过273天，其中的内容可能已经有所变动。

在Vue项目中，如果你想要引用public文件夹中的资源，你可以使用绝对路径而不是相对路径。public文件夹在Vue项目构建时会被复制到输出目录（通常是dist），因此其中的文件可以通过服务的根路径访问到。

例如，如果你有一个图片文件example.jpg位于public文件夹中，你可以通过以下方式引用它：




<template>
  <div>
    <!-- 使用绝对路径引用public文件夹中的图片 -->
    <img src="/example.jpg" alt="Example Image">
  </div>
</template>

在上面的例子中，src属性使用了绝对路径/example.jpg来引用图片。这意味着图片会从网站的根目录加载，因为public文件夹的内容被复制到了最终构建的文件夹的根目录。

请注意，在Vue单页应用中使用public文件夹的资源时，路径要以一个斜杠/开始，这代表了应用服务内容的根路径。如果你的Vue应用部署在非根路径下，那么引用资源时需要考虑相应的路径差异。