js模块路径解析关键看环境与解析器:相对路径须以./或../开头,浏览器中/开头为站点根目录,node.js不支持/开头路径,构建工具别名(如@)属编译期重写。

JS 中导入路径的正确配置,关键不在“怎么写”,而在于“写法对应什么环境、被谁解析”。相对路径和绝对路径不是命名习惯,而是由解析器按规则识别的语法信号。
相对路径:必须以 ./ 或 ../ 开头
这是所有 JS 模块系统(ESM、CommonJS)通用的硬性规则。只要路径以 ./ 或 ../ 开头,就按当前文件所在位置为基准解析。
-
./utils.js→ 同级目录下的 utils.js 文件(ESM 中扩展名不可省略) -
../api/fetch.js→ 上级目录中 api/fetch.js -
../../config/index.mjs→ 上两级,再进 config 目录找 index.mjs
注意:Node.js ESM 不支持自动补全 .js/.mjs,也不读取 package.json 的 main 字段来推断入口;必须写明完整文件名或通过 exports 显式声明。
浏览器中的绝对路径:以 / 开头,指向站点根目录
仅在浏览器环境生效,且 / 表示的是当前网页 URL 的根路径(origin + path root),和项目文件结构无关。
- 页面地址是
https://example.com/shop/product?id=123,import '@/lib/tool.js'会报错(@ 是构建工具别名,浏览器原生不识别) - 但
import '/js/tool.js'会被解析为https://example.com/js/tool.js - 这个路径必须真实存在,且服务器要能返回该资源(如 Nginx 配置了静态文件服务)
构建工具里的“绝对路径”:@ 或 /static 这类是别名,非原生语法
像 @/utils、/static/logo.png 这些写法,浏览器和 Node.js 原生都不认识——它们是 Vue CLI、Vite、uni-app 等构建工具在编译阶段做的路径重写。
-
@通常指向src/目录(可配置),只在import语句或require()中有效 -
/static在 uni-app 中默认映射到项目根目录下的 static 文件夹(HBuilderX 2.6.6+ 支持 template 中使用) - 这些路径不会在运行时被 JS 引擎解析,而是构建时替换为相对路径或 public 下的真实路径
Node.js 中没有 / 开头的模块路径
Node.js 的 CommonJS 和 ESM 模块解析器,完全忽略以 / 开头的路径。它只认三类:
- 相对路径(
./、../)→ 按文件位置解析 - 包名路径(
lodash、express)→ 从 node_modules 逐层向上查找 - 内置模块(
fs、path)→ 直接加载
所以 import '/utils' from '/utils.js' 在 Node.js 里会直接报错:Cannot find module。











