vite进行打包时如何把某个静态文件原封不动地拷贝到打包后的文件中

最近新建了一个项目，是用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

从代码中可以看到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静态文件的功能。