VueJS中无法在新窗口打开PDF文件的问题排查

首先，咱们来拆解一下你遇到的问题：

问题根源 #

你遇到的核心问题是Vue Router的history模式拦截了PDF文件的请求。当你点击链接打开PDF时，浏览器发送的请求被Vue Router捕获，因为你的路由配置里有{ path: '*', component: Home }这条通配规则，所有未匹配到已定义路由的请求都会被导向Home组件，所以你看到的其实是Home页面的内容，而非PDF文件。

Angular的静态资源处理逻辑和Vue不同：Angular默认会直接映射assets文件夹的资源，路由不会拦截这些静态资源请求，所以你之前的Angular代码能正常工作。

解决方案 #

这里有几种简单有效的解决方式，按推荐程度排序：

1. 将PDF文件移至public文件夹 #

Vue项目根目录下的public文件夹是专门存放无需Webpack处理的静态资源的，这些资源会被直接复制到构建后的dist根目录，并且不会被Vue Router拦截。

• 把Resume_Christopher_Kade.pdf放到public文件夹下
• 修改openPdf方法：

openPdf () {
  // 用根路径直接访问，确保请求不会被路由拦截
  window.open('/Resume_Christopher_Kade.pdf', '_blank')
}

2. 正确引用assets中的PDF文件 #

如果你想继续把PDF放在src/assets里，需要让Webpack正确解析资源路径，避免路由拦截：

方式A：使用require获取资源URL

openPdf () {
  const pdfUrl = require('@/assets/Resume_Christopher_Kade.pdf')
  window.open(pdfUrl, '_blank')
}

方式B：使用import导入资源

// 在组件顶部导入PDF文件
import pdfUrl from '@/assets/Resume_Christopher_Kade.pdf'

export default {
  // ...
  methods: {
    openPdf () {
      window.open(pdfUrl, '_blank')
    }
  }
}

Webpack会自动处理这些资源，生成正确的、不会被路由拦截的URL。

3. 修改路由规则（不推荐） #

你也可以添加一条路由规则，让PDF请求绕过Vue Router，但这种方式比较繁琐：

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/work', name: 'Work', component: Work },
    { path: '/posts', name: 'Posts', component: Posts },
    // 匹配PDF路径，直接跳转到资源URL
    { 
      path: '/assets/*.pdf', 
      beforeEnter: (to, from, next) => {
        window.location.href = to.fullPath
        next(false)
      }
    },
    { path: '*', component: Home }
  ]
})

关于“Vue实现不如Angular简单”的疑问 #

其实不是Vue更复杂，只是两者的静态资源处理和路由机制设计不同：

• Angular默认会把assets文件夹的资源直接映射到根路径，路由不会拦截这些请求；
• Vue在history模式下，路由会拦截所有进入应用的请求（除了public文件夹的资源），这是为了实现单页应用的路由跳转逻辑，但也要求我们按Vue的规则处理静态资源路径。

只要掌握了Vue的静态资源处理方式，操作起来同样简单，只是需要适应不同框架的设计习惯~

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