AWS Amplify部署的Vue3+Vite单页应用直接访问子页面时控制台出现404错误的解决求助

兄弟我太懂你这个困扰了！之前用Amplify部署Vue3+Vite项目的时候，也碰到过一模一样的情况——页面明明能正常加载，控制台却飘着404报错，还连累Google Ads审核不通过，简直闹心。

先给你拆解下问题根源：你配置的404转200规则其实已经生效了（不然页面根本打不开），但控制台的404不是来自页面本身，而是资源加载路径的问题，再加上Amplify的重定向规则细节没处理到位，导致Google Ads抓取到了错误的状态码。

具体原因分析 #

当你直接访问https://url.de/contacts时：

1. 浏览器先向Amplify服务器请求这个路径，服务器根据你的规则把它重定向到/index.html，页面能正常渲染；
2. 但Vite默认可能用了相对路径加载资源（比如js、css文件），浏览器会误以为这些资源在/contacts/目录下，就会发起https://url.de/contacts/xxx.js这类请求，而实际资源都在根目录，所以触发404；
3. 另外，你现有的规则是先返回404再转200，Google Ads的爬虫会抓取到这个初始的404状态码，所以才会拒绝你的URL。

解决步骤 #

1. 修正Vite的资源路径配置

在项目根目录的vite.config.js/vite.config.ts里，把base明确设置为根路径，确保所有资源都从根目录加载：

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

export default defineConfig({
  base: '/', // 关键配置，强制资源从根目录加载
  plugins: [vue()],
  // 其他原有配置...
})

2. 优化Amplify的重定向规则

把你现有的规则替换成更精准的版本，避免先返回404再跳转，直接给路由页面返回200状态：

[
  {
    "source": "</^[^.]+$/>",
    "status": "200",
    "target": "/index.html"
  },
  {
    "source": "/<*>",
    "status": "404-200",
    "target": "/index.html"
  }
]

• 第一条规则：匹配所有不带文件后缀的路径（也就是你的SPA路由页面），直接返回200和index.html，避免触发404；
• 第二条规则：兜底处理其他带后缀的资源请求，确保异常情况也能正常跳转。

3. 检查Vue Router的模式配置

确保你的Vue Router使用history模式，且没有额外的base配置（除非你是子目录部署）：

import { createRouter, createWebHistory } from 'vue-router'
import Contacts from '../views/Contacts.vue'

const router = createRouter({
  history: createWebHistory(), // 这里不要加base参数
  routes: [
    {
      path: '/contacts',
      name: 'Contacts',
      component: Contacts
    }
    // 其他路由配置...
  ]
})

export default router

验证方法 #

修改完以上配置后，重新打包项目并部署到Amplify：

1. 直接访问子页面，打开DevTools的Network面板，查看所有资源请求的路径是否都是根目录开头（比如https://url.de/assets/xxx.js）；
2. 用curl命令测试服务器返回的状态码：curl -I https://url.de/contacts，正常情况应该返回HTTP/2 200。

这样处理后，控制台的404报错会消失，Google Ads的爬虫也能抓取到正常的200状态码，问题就能彻底解决啦！

内容来源于stack exchange