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静态文件的功能。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值