Vite无法解析非import函数中使用的文件路径如何解决

你的判断是对的：Vite 不会自动解析普通 JS 字符串里写的文件路径，只有静态 import 语句、模板标签内的静态资源属性、new URL(相对路径, import.meta.url) 这类被静态分析识别为资源引用的写法，才会触发 Vite 的资源处理逻辑——既会把对应文件加入打包产物列表，也会自动替换成打包后带哈希的正确访问路径。你直接把路径写在字符串里赋值给script.src，Vite只会把它当成普通字符串处理，既不会打包main.dart.js，也不会修正路径，开发环境下自然会返回404。

二选一即可：

方案1：使用Vite原生支持的URL构造函数写法（推荐） #

这是Vite官方原生支持的非导入场景引用静态资源的写法，不需要改目录结构，也不需要额外插件，直接修改动态创建脚本的代码即可：

var scriptTag = document.createElement("script");
// 注意必须写带./的完整相对路径，不能省略前缀直接写文件名
scriptTag.src = new URL('./main.dart.js', import.meta.url).href;
scriptTag.type = "application/javascript";
document.body.append(scriptTag);

如果这段代码是直接写在src/app/index.html的内联脚本中，上面的相对路径不需要调整，正好匹配同目录下的main.dart.js，开发和生产环境都能正确解析，文件会被自动加入打包列表，路径也会自动修正。

方案2：将静态资源放入public目录 #

你当前配置中publicDir指向项目根目录下的public文件夹，这个目录下的所有文件会被Vite原样输出到打包产物的根路径，不会做哈希重命名和内容处理。你可以把main.dart.js移动到public目录下，然后用根绝对路径引用：

var scriptTag = document.createElement("script");
scriptTag.src = "/main.dart.js";
scriptTag.type = "application/javascript";
document.body.append(scriptTag);

这个方案适合不需要Vite做编译处理的独立第三方脚本，缺点是资源不会自动加哈希，缓存更新策略需要自行配置。

你当前vite.config.js里的rollupOptions.external配置项仅用来标记不需要被打包的外部依赖，不要把普通静态资源路径加到这个数组里，否则会导致资源解析异常。

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