运行时解析资源URL：动态加载JS路径未生效问题求助

安全阿岳

2026-8-24

运行时解析URL：modulepreload资源未应用动态路径前缀的解决方法

问题背景

配置了Vite的experimental.renderBuiltUrl实现运行时动态解析资源URL，配置代码如下：

experimental: {
    renderBuiltUrl: (filename: string, { hostType, type }) => {
        if (hostType === 'js') {
            return { runtime: `window.__toDynamicUrl(${JSON.stringify(filename)})` };
        }
        return { relative: true }
    }
}

但嵌套路由等场景下动态加载的JS文件，在index.html中以modulepreload标签引入时，依然是硬编码的绝对路径，没有经过window.__toDynamicUrl处理：

<!-- index.html -->
<link rel="modulepreload" as="script" crossorigin="" href="/assets/myComponent.a2adaa03.js">
...
<script>
    window.__toDynamicUrl = (file) => `_some_path_/spa/${file}`;
</script>

问题原因

renderBuiltUrl的hostType: 'js'仅覆盖JS模块内部的导入路径（比如import()动态导入），而HTML中的modulepreload链接属于hostType: 'html'的处理场景，当前配置对这类资源直接返回relative: true，所以不会触发运行时URL解析。

修复方案

修改配置，将HTML中的脚本类资源（包括modulepreload的JS）也纳入运行时解析范围：

experimental: {
    renderBuiltUrl: (filename: string, { hostType, type }) => {
        // 对JS模块和HTML中的脚本资源应用运行时URL解析
        if (hostType === 'js' || (hostType === 'html' && type === 'script')) {
            return { runtime: `window.__toDynamicUrl(${JSON.stringify(filename)})` };
        }
        // 其他资源保持相对路径逻辑
        return { relative: true }
    }
}