如何在Webpack/Gatsby中移除资源URL的前缀斜杠/

要让Gatsby构建生成的index.html中所有资源路径去掉前缀斜杠，变成仅保留文件名和相对路径的形式，你可以通过修改Webpack配置来实现，具体步骤如下：

1. 修改Webpack的publicPath配置 #

Gatsby默认会给所有资源路径加上前缀斜杠，核心原因是Webpack的output.publicPath默认值为/。我们可以通过Gatsby的钩子在gatsby-node.js中修改这个配置：

在项目根目录创建或编辑gatsby-node.js文件，添加以下代码：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    output: {
      // 将publicPath设为空字符串，移除所有资源路径的前缀斜杠
      publicPath: '',
    },
  })
}

2. 排查gatsby-config.js的冲突配置 #

检查你的gatsby-config.js文件，如果之前设置了pathPrefix属性，确保它的值为空字符串或者直接移除该配置项，避免和上面的Webpack配置冲突：

module.exports = {
  // 若存在该配置，要么设为空要么直接删除
  // pathPrefix: '',
  // 其他项目配置...
}

3. 重新构建项目 #

运行Gatsby的构建命令，让配置生效：

gatsby build

构建完成后，打开public/index.html就能看到所有资源的href属性都去掉了前缀斜杠，和你期望的效果完全一致：

额外注意事项 #

• 如果你的项目使用了gatsby-plugin-manifest或其他涉及资源路径的插件，需要同步调整这些插件的配置，确保图标、静态文件等路径也符合相对路径要求。
• 这种配置更适合部署在域名根目录的场景，如果需要部署到子目录，建议重新评估相对路径的可行性，或者将pathPrefix设置为对应的子目录路径。

内容的提问来源于stack exchange，提问作者Alqama Bin Sadiq