如何阻止VueRouter将静态文件链接识别为路由？

问题根源 #

当VueRouter使用history模式时，AWS Amplify默认的重写规则会将所有请求（包括静态文件请求）转发到index.html，导致静态文件请求被VueRouter接管并跳转到404兜底路由。本地开发环境中Vite会自动处理静态文件的路由匹配，因此不会出现该问题。

解决方案：调整AWS Amplify重写规则 #

通过配置重写规则，让服务器优先匹配存在的静态资源，剩余路径再交给VueRouter处理，有两种实现方式：

方式1：通过项目根目录的amplify.yml配置

如果项目中没有amplify.yml文件，直接在根目录创建，添加以下内容：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
  rewriteRules:
    # 优先匹配指定后缀的静态文件（包含zip）
    - source: /<*>\.(css|js|png|jpg|jpeg|gif|ico|svg|zip)$
      target: /$1
      status: 200
    # 无后缀路径转发到index.html，交给VueRouter处理
    - source: </^[^.]+$/>
      target: /index.html
      status: 200

方式2：通过AWS Amplify控制台配置

1. 登录AWS Amplify控制台，进入你的项目
2. 点击「App settings」→「Rewrites and redirects」
3. 删除默认的重写规则，添加两条新规则：
   • 第一条规则：
     • Source address: /<*>\.(css|js|png|jpg|jpeg|gif|ico|svg|zip)$
     • Target address: /$1
     • Type: 200 (Rewrite)
   • 第二条规则：
     • Source address: </^[^.]+$/>
     • Target address: /index.html
     • Type: 200 (Rewrite)

额外确认 #

确保你的.zip文件放置在Vite项目的public目录下，这样构建后文件会被复制到dist根目录，Amplify才能正确定位到资源。

完成配置后重新部署项目，点击静态文件链接即可正常触发下载，不会再被VueRouter拦截。

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