React组件如何使用相对路径加载同文件夹下的外部script脚本

问题根因 #

你动态创建script标签时填写的相对路径，是相对于浏览器地址栏的当前页面URL，而非DesignScreen.js文件的本地存储路径。React项目经过打包工具编译后，src目录下的文件结构会被重构，你直接写./draggable.js浏览器无法定位到src目录下的对应脚本。

可行解决方案 #

方案1：将静态脚本放入public目录（最省事）

1. 把draggable.js移动到项目根目录的public文件夹下，可自行新建子目录分类比如public/assets/js/
2. 修改src配置为相对于站点根目录的路径：

externalScript.src = '/assets/js/draggable.js'

路径开头的/表示直接从站点根路径查找资源，不受当前页面路由影响，不需要写完整域名。

方案2：同目录下引入用打包工具解析路径

如果你不想把脚本移出src目录，可利用打包工具的资源路径解析能力，提前拿到脚本的编译后路径：

1. 如果你用Vite，在文件顶部引入路径：

import draggableScriptUrl from './draggable.js?url'

2. 如果你用Webpack/Create React App，对应写法：

const draggableScriptUrl = require('./draggable.js')

3. 动态创建脚本时直接用解析好的路径：

externalScript.src = draggableScriptUrl

打包工具会自动将相对路径替换为编译后资源的正确访问路径，不需要你手动拼接。

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