如何从其他文件夹调用文件？Src与Test目录JS文件调用路径问题

嘿，我来帮你搞定这个跨文件夹调用的路径问题！先明确下咱们的典型项目结构，方便你对应自己的实际情况调整：

你的项目根目录/
├── Src/
│   └── main.js  # 你要写调用代码的文件
└── Test/
    └── utils.js  # 你要调用的目标文件（包含所需函数）

接下来分两种常见场景给你拆解：

1. Node.js环境（含Node运行的前端项目） #

不管你用CommonJS的require还是ES Modules的import，路径逻辑是一致的：从Src/main.js出发，先回到上一级目录（项目根目录），再进入Test文件夹定位到目标文件。

用CommonJS语法（require） #

在Src/main.js里这么写：

// 引入Test文件夹里的utils.js，按需解构出目标函数
const { 你要调用的函数名 } = require('../Test/utils.js');

// 现在就能直接调用函数了
你要调用的函数名();

用ES Modules语法（import） #

首先得确保项目支持ES Modules：要么在package.json里添加"type": "module"，要么把JS文件后缀改成.mjs。然后在Src/main.js中写：

// 按需引入你需要的函数
import { 你要调用的函数名 } from '../Test/utils.js';

// 调用目标函数
你要调用的函数名();

2. 纯浏览器前端项目 #

浏览器里的路径是相对于HTML入口文件的位置解析的，假设你的HTML文件放在项目根目录下：

你的项目根目录/
├── index.html  # 入口HTML文件
├── Src/
│   └── main.js
└── Test/
    └── utils.js

首先在HTML里引入Src/main.js时，要加上type="module"标识：

<script type="module" src="./Src/main.js"></script>

然后在Src/main.js里调用Test/utils.js的写法和Node.js的ES Modules完全一致：

import { 你要调用的函数名 } from '../Test/utils.js';

你要调用的函数名();

几个实用注意点 #

• 路径区分大小写：Linux/macOS系统对文件名、文件夹名的大小写敏感，必须完全匹配；Windows系统虽不敏感，但统一写法能避免跨环境的坑。
• 若使用Webpack、Vite这类构建工具，还能配置路径别名简化写法，但基础的相对路径逻辑是通用的。

内容的提问来源于stack exchange，提问作者Kavi Yarasu