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

本文主要是介绍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>

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

这篇关于vite进行打包时如何把某个静态文件原封不动地拷贝到打包后的文件中的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---