dist打包流程

打包dist : npm run dist

运行dist : gulp dist_open

浏览器打开地址 : http://localhost:3000/dist/pc/index.html

如果错乱则需要手动修改gulp插件:

原始代码

<link rel="stylesheet" href="../css/default.css">
<script src="../js/app.js"></script>

打开node_modulesgulp-revindex.js

第144行:

manifest[originalFile] = revisionedFile;
更新为: 
manifest[originalFile] = originalFile + '?v=' + file.revHash;
打开node_modules\rev-path\index.js

10行:

return filename + '-' + hash + ext;
更新为:
return filename + ext;

打开node_modulesgulp-rev-collectorindex.js

40行:

let cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
更新为: 
let cleanReplacement =  path.basename(json[key]).split('?')[0];

最终结果

<link rel="stylesheet" href="../css/default.css?v=5a636d79c4">
<script src="../js/app.js?v=3a0d844594"></script>

感悟:好脑袋不如个赖笔头

### 解决 `pdfjs-dist` 打包后白屏问题 当使用 `pdfjs-dist` 进行打包时,如果遇到页面加载后显示空白的情况,通常是因为 Webpack 或其他构建工具未能正确处理 PDF.js 的 worker 文件或静态资源。以下是可能的原因以及解决方案: #### 可能原因分析 1. **Worker 路径未正确定义** PDF.js 使用了一个独立的 Worker 来执行部分操作。如果在生产环境中未正确配置 Worker 的路径,则可能导致功能失效并引发白屏现象[^3]。 2. **Webpack 配置不兼容** 如果 Webpack 版本较高而未针对 `pdfjs-dist` 做特殊处理,可能会忽略某些必要的依赖项或者无法解析动态导入的内容[^4]。 3. **CORS 限制** 当尝试从外部源加载 PDF 文档时,如果没有设置跨域资源共享(CORS),浏览器会阻止请求,从而导致渲染失败[^5]。 --- #### 解决方案 ##### 方法一:手动指定 Worker Path 通过显式定义 `globalThis.pdfjsLib.GlobalWorkerOptions.workerSrc` 属性来指向正确的 Worker 文件位置。例如,在项目入口处添加如下代码: ```javascript import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist'; // 确保此路径匹配实际打包后的文件结构 GlobalWorkerOptions.workerSrc = new URL( 'pdfjs-dist/build/pdf.worker.min.js', import.meta.url ).toString(); ``` 上述方法可以有效解决因默认 Worker 路径错误而导致的问题[^6]。 ##### 方法二:调整 Webpack 构建配置 对于现代前端框架(如 Vue、React),需要修改其内部使用的 Webpack 设置以支持 `pdfjs-dist` 的复杂需求。具体做法包括但不限于以下几点: - 安装额外插件以优化 ES Module 处理逻辑; - 添加 alias 映射以便更灵活地管理库版本差异。 示例 Webpack 自定义规则如下所示: ```javascript module.exports = { resolve: { fallback: { fs: false, path: require.resolve('path-browserify'), }, }, }; ``` 注意此处需依据实际情况增删字段内容[^7]。 ##### 方法三:验证网络环境下的文档访问权限 确认目标服务器已启用 CORS 政策,并允许客户端发起 GET 请求获取所需数据流。可以通过 Chrome 开发者工具 Network 标签观察状态码及响应头信息进一步排查异常情况[^8]。 --- ### 总结 综上所述,造成 `pdfjs-dist` 在特定场景下表现为纯白色界面的主要因素集中在资源配置不当方面。按照前述指导逐一校验各项参数即可恢复正常运作流程
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值