Vue路由无法匹配带后缀参数，如何获取带后缀的fileId？

问题场景 #

配置了如下Vue路由：

{
  path: '/file/:fileId'
}

访问http://.../file/abc时能正常获取fileId为abc，但访问http://.../file/abc.jpg时浏览器返回404，Vue路由完全没生效。

问题原因 #

这是因为服务端会把带后缀（比如.jpg）的URL判定为静态资源请求，直接去服务器目录里查找对应文件，而没有把请求转发给Vue的入口文件（通常是index.html），导致Vue实例未加载，路由自然无法处理。

解决方案 #

1. 开发环境配置 #

Vue CLI 项目

修改项目根目录下的vue.config.js，开启historyApiFallback的disableDotRule选项，让带点的路径也能被转发给Vue：

module.exports = {
  devServer: {
    historyApiFallback: {
      disableDotRule: true
    }
  }
}

Vite 项目

Vite默认支持带点的路由参数，若仍有问题，可在vite.config.js中确保historyApiFallback开启：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    historyApiFallback: true
  }
})

2. 生产环境部署配置 #

无论用Vue CLI还是Vite打包，部署到服务器（以Nginx为例）时，都需要配置请求转发规则，让所有请求都指向index.html：

location / {
  try_files $uri $uri/ /index.html;
}

这个规则会先尝试访问静态资源，找不到就把请求转发给index.html，交由Vue路由处理。

3. 确认路由无冲突 #

检查项目中是否存在其他路由规则（比如/file/*），避免和/file/:fileId的规则冲突，导致带后缀的请求被错误拦截。

验证配置 #

完成上述配置后，访问http://.../file/abc.jpg，即可通过以下方式获取完整的fileId参数：

• Vue 2：this.$route.params.fileId
• Vue 3（组合式API）：useRoute().params.fileId

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