JavaScript 中怎么用 import 引入相对路径与绝对路径的模块-js教程-PHP中文网

javascript中import支持相对路径（如./、../）和构建工具配置的“绝对路径”别名（如@/），前者直接可用，后者需vite/webpack/ts等配置；node.js原生esm仅支持相对路径和包名，不支持/开头的路径。

javascript 中怎么用 import 引入相对路径与绝对路径的模块

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 Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

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 等显式后缀

建议统一使用构建工具提供的别名方案（如 @/），既提升可读性，也方便重构迁移。