为什么在Vue.js项目中无法在新标签页打开任意文件

Vue单页应用开启history路由模式后，所有路径请求会优先被前端路由接管，当路由表没有匹配/assets/cv.pdf的规则时，就会触发你配置的404/首页重定向逻辑，导致无法正常加载静态文件。

你可以按照下面的步骤依次排查修改：

• 确认静态资源存放路径
  如果你用的是Vue2 + Vue Cli，把pdf文件放到项目根目录的public/assets文件夹下；如果是Vue3 + Vite，同样放到public/assets文件夹下，打包后这类资源会被直接拷贝到输出根目录，不会被编译处理。
• 修改跳转链接写法
  不要直接写相对路径assets/cv.pdf，要使用/开头的绝对路径，同时加target="_blank"强制新标签页打开，代码示例：

  <a href="/assets/cv.pdf" target="_blank" rel="noopener noreferrer">打开简历</a>
  

  不要用<router-link>组件跳转静态资源，直接用原生<a>标签即可，router-link只会走前端路由逻辑，必然会触发重定向。
• 调整路由和服务端配置
  首先把路由表中通配符匹配重定向到首页的规则，放到所有路由规则的最末尾，避免优先级过高覆盖静态资源路径。
  如果是生产环境部署，要额外配置Nginx/Apache规则，排除静态资源目录的前端路由转发，以Nginx为例，参考配置如下：

  location ~* \.(pdf|doc|docx|jpg|png)$ {
    root /usr/share/nginx/html;
    try_files $uri =404;
  }
  

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