VueJS如何查看存储在项目文件夹外驱动器中的PDF文件

• 浏览器安全限制：所有运行在HTTP/HTTPS协议下的Web页面，都被浏览器安全沙箱禁止直接访问file://协议的本地文件资源，这就是你用a标签点击被拦截、跳转到about:blank#blocked的核心原因，该限制和前端框架无关，无法通过前端代码直接绕过。
• router-link使用场景错误：router-link是vue-router提供的单页应用内部路由跳转组件，会自动将传入的路径拼接为当前前端应用的相对路由地址，因此会自动加上localhost:8080前缀，不适合用于外部资源跳转。

你需要通过后端做静态资源映射来实现需求，不需要把PDF放到Vue项目的asset或public文件夹中，操作步骤如下：

1. 后端配置静态资源映射
   将你统一存放PDF的文件夹，配置为后端服务的静态资源访问目录，不同后端框架都有对应的配置方式：
   比如Java SpringBoot可以通过实现WebMvcConfigurer的addResourceHandlers方法，将本地路径C:/Users/user/Downloads/映射为服务路径/pdf-resources/；
   Node.js Express可以用app.use('/pdf-resources', express.static('C:/Users/user/Downloads/'))实现映射。
2. 调整返回的文件地址格式
   后端不再返回file://协议的本地路径，而是返回对应静态资源的HTTP/HTTPS地址，比如原来的file:///C:/Users/user/Downloads/campusmap.pdf调整为https://你的后端服务域名/pdf-resources/campusmap.pdf。
3. 前端代码调整
   直接使用普通a标签实现跳转即可，不需要用router-link：

<a :href="fileAddress" target="_blank" rel="noopener noreferrer">查看文件</a>

其中fileAddress就是后端返回的HTTP格式的PDF资源地址，点击后就会在新标签页正常打开PDF。

内容的提问来源于stack exchange，提问作者svms54