Next.js构建导出后资源路径带斜杠的自动化解决方法

方案一：配置Next.js资源前缀 #

在项目根目录的next.config.js中添加配置，直接让导出的资源使用相对路径：

module.exports = {
  assetPrefix: './',
  trailingSlash: true, // 可选，生成带目录结构的页面文件，避免路径歧义
}

• assetPrefix: './'：将CSS、JS等资源的路径前缀从根路径（/）改为相对当前HTML文件的路径（./）
• trailingSlash: true：开启后每个页面会生成[页面名]/index.html结构，适配更多部署场景

方案二：通过构建脚本自动替换路径 #

如果不想修改Next.js核心配置，可借助工具在导出完成后批量修正路径：

1. 安装依赖工具：

npm install replace-in-file --save-dev

2. 修改package.json中的构建命令，增加路径替换步骤：

{
  "scripts": {
    "build": "next build && next export && npm run fix-paths",
    "fix-paths": "replace-in-file 'href=\"/' 'href=\"./' out/**/*.html && replace-in-file 'src=\"/' 'src=\"./' out/**/*.html"
  }
}

该脚本会自动遍历out目录下所有HTML文件，把资源路径开头的/替换为./

注意事项 #

• 部署时确保服务器从out目录加载静态文件
• 若使用GitHub Pages部署，需在仓库设置中指定out目录为发布源

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