JavaScript中import支持相对路径（如./、../）和构建工具配置的“绝对路径”别名（如@/），前者直接可用，后者需Vite/Webpack/TS等配置；Node.js原生ESM仅支持相对路径和包名，不支持/开头的路径。
JavaScript 中 import 语句支持相对路径和绝对路径，但“绝对路径”的含义需特别注意：它不是指文件系统根目录（如 /src/utils.js），而是指从项目入口或模块解析根开始的路径——实际行为取决于运行环境（浏览器、Node.js）和构建工具（如 Vite、Webpack）的配置。
相对路径导入（直接可用，无需配置）
以当前模块文件为基准，用 ./ 或 ../ 开头：
-
import utils from './utils.js';→ 同级目录下的utils.js -
import api from '../services/api.js';→ 上级目录中services/api.js -
import config from '../../config/index.js';→ 往上两级再进config/index.js
注意：ESM 要求扩展名不能省略（如 .js、.ts），除非使用支持自动解析的环境（如 Vite、Node.js 14+ 的 "type": "module" + .mjs 或明确配置）。
“绝对路径”导入（需配置别名或 baseUrl）
浏览器原生 ESM 不支持真正的绝对路径（如 import x from '/src/utils.js' 会请求服务器根路径，非项目结构）。所谓“绝对路径”通常指基于项目根的路径，需借助工具实现：
立即学习“Java免费学习笔记（深入）”；
-
Vite：默认支持
@/别名指向src目录，可在vite.config.js中自定义：resolve: { alias: { '@': path.resolve(__dirname, 'src') } }
然后写：import Header from '@/components/Header.vue'; -
Webpack：通过
resolve.alias配置，例如：alias: { '@': path.resolve(__dirname, 'src') }
再配合resolve.extensions支持省略扩展名。 -
TypeScript：需同步配置
tsconfig.json的baseUrl和paths，否则编辑器会报错，但不影响运行时（只要构建工具支持）："compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }
Node.js 原生 ESM 中的路径规则
Node.js（v12.20+，启用 "type": "module"）只认相对路径和包名，不支持 /xxx 或 ~/xxx 这类“绝对路径”。若想用项目根路径，可：
- 用
import.meta.url动态计算：
import { fileURLToPath } from 'url';<br> import { dirname, resolve } from 'path';<br> const __dirname = dirname(fileURLToPath(import.meta.url));<br> import config from resolve(__dirname, '../config.js');
但注意：这只能用于import()动态导入，不能用于静态import语句。 - 更实用的做法仍是用相对路径，或发布为本地 npm 包（通过
npm link或file:协议）。
常见错误与建议
以下写法容易出错，需避免：
-
import x from '/utils.js'→ 浏览器会请求http://localhost/utils.js，不是项目源码 -
import x from 'src/utils.js'→ 没配别名时会被当作 npm 包名，报Cannot find module -
import x from './utils'（无扩展名）→ 在 Node.js 原生 ESM 中会报错，必须写.js或.json等显式后缀
建议统一使用构建工具提供的别名方案（如 @/），既提升可读性，也方便重构迁移。
