如何解决引入外部JavaScript文件时静态资源URL基准路径错误问题

问题根因 #

JS脚本中写的相对路径，默认会以脚本所在页面的源地址作为基准路径解析，而非脚本自身的源地址，所以你从5000端口的页面引入3000端口的脚本时，相对路径自然会拼上5000的地址。

可行解决方案 #

• 方案1：硬编码绝对路径
  直接把3000服务脚本内的资源路径改成完整绝对路径即可，适合服务地址固定的场景：

  // script.js 直接写全路径
  const image = 'http://localhost:3000/assets/logo.png';
  

• 方案2：动态获取脚本自身地址拼接路径
  不需要硬编码域名，自动适配脚本的加载源：
  • 如果是普通脚本，用document.currentScript获取自身加载地址：

  // script.js 内逻辑
  const scriptSrc = document.currentScript.src
  // 提取脚本所在的目录路径
  const basePath = scriptSrc.slice(0, scriptSrc.lastIndexOf('/') + 1)
  const image = `${basePath}assets/logo.png`
  

  • 如果是ES模块脚本，用import.meta.url获取自身地址：

  // script.js 内逻辑
  const basePath = new URL('./', import.meta.url).href
  const image = new URL('./assets/logo.png', basePath).href
  

• 方案3：构建工具配置前缀
  如果用了Vite、Webpack等构建工具打包3000服务的脚本，可以直接配置构建的资源公共路径，打包时自动拼接前缀：
  • Vite配置示例：在vite.config.js中设置base: 'http://localhost:3000/'
  • Webpack配置示例：在output中设置publicPath: 'http://localhost:3000/'

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