Vue Nuxt SPA本地yarn start运行正常，部署AWS S3后显示异常如何解决？

API 探路者

2026-9-27

解决方案

1. 调整Nuxt项目配置

打开项目根目录的nuxt.config.js，确认配置如下：

export default {
  // 关闭服务端渲染，启用SPA模式
  ssr: false,
  // 设置为静态部署目标
  target: 'static',
  // 若部署在S3桶的子路径下，需补充路由基础路径配置，根路径部署可省略
  // router: {
  //   base: '/自定义子路径/'
  // }
}

2. 重新生成静态部署产物

在项目根目录依次执行以下命令：

# 依赖无变动可跳过本步
yarn install
# 构建项目
yarn build
# 生成静态资源文件
yarn generate

执行完成后检查dist目录，确认已生成index.html、_nuxt文件夹等完整静态资源。

3. 配置S3静态托管规则

进入AWS S3控制台对应存储桶的配置页面：

开启「静态网站托管」功能
索引文档项填写index.html
错误文档项同样填写index.html，解决SPA客户端路由刷新时的404问题
保存配置

4. 配置S3访问权限

关闭存储桶的「阻止所有公开访问」开关
配置桶策略，允许公开读访问，参考策略如下（替换为实际的桶名称）：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::你的存储桶名称/*"
    }
  ]
}