Nuxt3部署至AWS S3子目录后图片加载路径异常求助

问题分析 #

你已设置app.baseURL: '/mySubFolder/'，JS文件能正常加载是因为Nuxt打包时会自动为JS资源注入baseURL，但图片等静态资源如果使用硬编码的绝对路径（比如/image.jpg），Nuxt不会自动替换路径，导致请求指向根目录而非目标子目录。

具体修复步骤 #

1. 修正模板中的图片引用方式 #

避免直接写绝对路径，改用Nuxt的资源别名或运行时配置拼接路径：

• 使用~/别名指向项目根目录（Nuxt会自动处理baseURL）：

  <img src="~/assets/image.jpg" alt="示例图片">
  

• 或通过useRuntimeConfig动态拼接baseURL（适用于外部或动态图片）：

  <script setup>
  const appConfig = useRuntimeConfig().app
  </script>
  
  <template>
    <img :src="`${appConfig.baseURL}image.jpg`" alt="示例图片">
  </template>
  

2. 补充generate配置 #

在nuxt.config.js中添加generate.base，确保静态生成时资源路径完全匹配子目录：

export default defineNuxtConfig({
  app: {
    baseURL: '/mySubFolder/',
  },
  generate: {
    base: '/mySubFolder/', // 新增此配置
  },
  // 其他原有配置...
})

3. 修正CSS中的背景图片路径 #

如果CSS中使用背景图片，同样避免绝对路径，改用相对路径或~/别名：

/* 错误写法 */
.bg-image {
  background-image: url('/image.jpg');
}

/* 正确写法 */
.bg-image {
  background-image: url('~/assets/image.jpg');
}

4. 重新生成并部署 #

执行nuxt generate重新生成静态文件，检查dist目录下的HTML文件，确认图片路径已自动带上/mySubFolder/前缀后，再上传至S3子目录。

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