最近新建了一个项目,是用vue3.x+vite+pinia+elementPlus搭建的。
在后续的需求开发中,遇到这样一个问题,就是要进行pdf文件预览,所以我引入了pdf.js这个插件,我使用了这个插件中的展示页面viewer.html,具体代码如下:
<template>
<div>
<iframe
:src="pdfUrl"
frameborder="0"
width="100%"
height="100%"
></iframe>
<button @click="viewPdf">预览pdf</button>
</div>
</template>
<script setup>
let pdfUrl = "";
let href = `http://xxx.xxx.com.cn/sit/static/assets/online.pdf`;
pdfUrl = `static/pdfjs/web/viewer.html?file=${encodeURIComponent(href)}`;
function viewPdf() {
window.open(
`static/pdfjs/web/viewer.html?file=${encodeURIComponent(href)}`
);
}
</script>
<style scoped>
</style>
从代码中可以看到pdfjs这个文件里面是存放pdf.js插件的文件夹,然后这个文件夹放在static文件夹下面,是这样的逻辑结构,如果要进行打包,怎么把static这个文件夹下面的文件不经过打包编译直接放在打包后的文件中呢?
看了一下vite官方文档,有这样一段话:
public 目录
如果你有下列这些资源:
不会被源码引用(例如 robots.txt)
必须保持原有文件名(没有经过 hash)
…或者你压根不想引入该资源,只是想得到其 URL。
那么你可以将该资源放在指定的 public 目录中,它应位于你的项目根目录。该目录中的资源在开发时能直接通过 / 根路径访问到,并且打包时会被完整复制到目标目录的根目录下。
目录默认是 /public,但可以通过 publicDir 选项 来配置。
请注意:
引入 public 中的资源永远应该使用根绝对路径 —— 举个例子,public/icon.png 应该在源码中被引用为 /icon.png。
public 中的资源不应该被 JavaScript 文件引用。
从这段话中我得到了启发,就是把static直接放在根目录下的public文件夹中,这样打包后,static文件就直接被移动到打包后的文件中(打包后的文件根目录下)
项目文件的目录如下:
├── node_modules #依赖
├── public # 公共静态资源目录
│ ├── static # 静态文件
│ │ ├── pdfjs # pdf预览插件
│ │ │ ├── build
│ │ │ ├── web
├── src # 主目录
│ ├── api # 接口文件
│ ├── assets # 资源文件
│ ├── router # 路由配置
│ ├── stores # 数据仓库
│ ├── utils # 工具类
│ ├── views # 页面
│ ├── App.vue # vue主页
│ ├── main.js # 主入口
├── .env.production # 生产环境打包配置
├── .env.sit # sit环境打包配置
├── .env.uat # uat环境打包配置
├── index.html # 主页
├── package-lock.json # 锁定安装包版本
├── package.json # 安装包版本
├── vite.config.js # 打包配置
打包后的文件目录如下:
├── assets # 打包后存放的文件
│ ├── assetsDisposal-1017a1a8.css
│ ├── assetsDisposal-b22ba092.js
│ ├── index-7d27b7df.js
│ ├── index-d7c73f10.css
│ ├── pdfPage-87bbb9a6.js
│ ├── upload-53e62f31.css
│ ├── upload-5828d6bd.js
├── static # 公共静态资源目录
│ ├── pdfjs # pdf预览插件
│ │ ├── build
│ │ ├── web
├── index.html # 主页
从目录结构中可以看出,项目文件中的public中的static直接被复制到打包后的文件根目录下,从而实现了类似于webpack中的CopyWebpackPlugin的copy静态文件的功能。