VitePress不能展示PDF？这个小技巧让你轻松解决！

哈喽，大家好，我是木头左！

大家好，我是你们的公众号博主。今天，我要和大家分享一个关于VitePress的小技巧。你是否曾经在使用VitePress时遇到过无法展示PDF的问题？别担心，我这里有一个简单的解决方案，让你轻松解决这个问题。

问题的根源

要明确一点，VitePress不能展示PDF的原因是在build打包时，除图像、媒体和字体文件外的静态资源要放在public下。这是因为VitePress默认将静态资源放在public目录下，而PDF文件并不在这个范围内，所以在构建时会出现问题。

解决方案

那么，如何解决这个问题呢？其实很简单，只需要将PDF文件放到public目录下即可。但是，如果你的项目中有很多PDF文件，这样做显然不太现实。那么，有没有更好的解决方案呢？答案是肯定的。

使用插件

可以使用一个名为vite-plugin-static-assets-external的插件来解决这个问题。这个插件可以在构建时将指定的静态资源（如PDF文件）复制到public目录下。这样，就可以在不修改源代码的情况下解决这个问题。

使用配置文件

除了使用插件，还可以通过修改VitePress的配置文件来解决这个问题。可以在vite.config.js文件中添加以下代码：

export default {
  // ...
  optimizeDeps: {
    include: ['pdf'], // 将pdf文件添加到include数组中
    exclude: [], // 排除其他不需要优化的文件类型
  },
  // ...
}

这样，当运行npm run build命令时，VitePress就会自动将pdf文件复制到public目录下，从而解决了这个问题。

结论

通过以上两种方法，可以轻松地解决VitePress不能展示PDF的问题。希望这篇文章能够帮助到你，如果你有任何疑问或者建议，欢迎在评论区留言。同时，也欢迎大家关注的公众号，会定期分享更多有用的技巧和知识。让一起进步，一起成长！

我是木头左，感谢各位童鞋的点赞、收藏，我们下期更精彩！