在vite项目中存放静态文件并在线预览

402 阅读1分钟

项目需要在线预览pdf文档,pdf文档在新标签页打开 项目通过vite构建

预览

pdf在线预览比较简单,只需要通过window.open或者location.herf或者a标签就可以实现,代码如下:

const url = `http://${location.host}/files/PPS可编程生产力系统-使用手册-V1.0.pdf`;
window.open(url, '_blank');

以上路径中的files文件不是vite的静态资源文件存放路径,所以会在打包时被更改,线上环境会出现访问不了的问题,vite官网给出的解释如下:

public 目录#

如果你有下列这些资源:

  • 不会被源码引用(例如 robots.txt
  • 必须保持原有文件名(没有经过 hash)
  • ...或者你压根不想引入该资源,只是想得到其 URL。

那么你可以将该资源放在指定的 public 目录中,它应位于你的项目根目录。该目录中的资源在开发时能直接通过 / 根路径访问到,并且打包时会被完整复制到目标目录的根目录下。

目录默认是 <root>/public,但可以通过 publicDir 选项 来配置。

请注意:

  • 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子,public/icon.png 应该在源码中被引用为 /icon.png
  • public 中的资源不应该被 JavaScript 文件引用。

修改地址

const url = `http://${location.host}/PPS可编程生产力系统-使用手册-V1.0.pdf`;
window.open(url, '_blank');

说明:在根目录下创建public文件夹,或者其他文件夹,然后通过publicDir去配置,然后就线上环境就没有问题了。

小记:webpack构建时默认有public文件夹,vite不默认创建,用法同webpack,需要在使用vite时注意。