Golang服务静态文件时HTML URL前导斜杠如何兼容本地与服务端打开

根本原因 #

你观察到的Gin、Beego的路径表现是所有Web服务的通用行为，核心是两种场景的路径解析规则不一致：

• 本地直接打开走file协议：路径开头带/会解析为磁盘根目录，不带/的相对路径会基于当前html文件所在的本地目录解析
• 服务端部署走http/https协议：路径开头带/会解析为站点根目录，不带/的相对路径会基于当前页面的访问URL路径解析，若页面路由存在多级前缀就会出现路径拼接错误

推荐方案（按优先级排序） #

方案1：本地启用简易静态服务（零代码改造成本，最推荐） #

不用修改任何html代码，只要本地访问时不直接打开文件，而是在项目根目录启动一个临时静态服务，本地也走http协议，路径规则和服务端完全统一：

• 如果你本地装了Python3，执行命令：python3 -m http.server 8000
• 如果你本地装了Node.js，先全局装http-server：npm install -g http-server，再执行命令：http-server -p 8000
  启动后在浏览器访问http://localhost:8000即可，和服务端部署的行为完全一致。

方案2：动态匹配路径规则（适合必须支持直接打开file协议的场景） #

在head标签内加入一段js动态设置基准路径，后续所有资源路径都不用带前导斜杠：

<head>
  <script>
    const base = document.createElement('base')
    if (window.location.protocol === 'file:') {
      base.href = './'
    } else {
      // 服务端如果有站点前缀，这里改成对应前缀即可，比如'/app/'
      base.href = '/' 
    }
    document.head.appendChild(base)
  </script>
  <link href="assets/css/template_style.css" rel="stylesheet" type="text/css" />
</head>

方案3：构建工具自动处理（适合有工程化构建的正式项目） #

如果你的项目用了Vite、Webpack等构建工具，直接配置publicPath参数即可：

• 开发环境（本地调试）配置为./
• 生产环境（服务端部署）配置为/或者对应站点前缀
  构建工具会在打包时自动替换所有静态资源的路径，无需手动修改html代码。

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