如何通过import/export访问上层3-4级目录下的data.js文件

1. 确认目录层级对应关系 #

根据你提供的目录结构，app.js 位于多层子目录中，data.js 在项目根目录的 data 文件夹下。从 app.js 所在文件夹往上数4级到达根目录，再进入 data 文件夹就能定位到目标文件。

2. 配置data.js的导出逻辑 #

先确保 data.js 正确导出数据，两种常用写法：

// 命名导出（适合导出多个数据）
export const targetData = { /* 你的数据内容 */ };

// 默认导出（适合导出单一数据）
export default { /* 你的数据内容 */ };

3. 在app.js中编写导入代码 #

按照层级关系使用相对路径导入：

// 对应命名导出的写法
import { targetData } from '../../../../data/data.js';

// 对应默认导出的写法
import targetData from '../../../../data/data.js';

可选简化方案 #

如果觉得多层 ../ 过于繁琐，在Webpack、Vite等前端构建工具中可以配置路径别名，比如将项目根目录映射为 @，之后导入可以简化为：

import { targetData } from '@/data/data.js';

具体配置规则可参考对应构建工具的官方文档。

内容的提问来源于stack exchange，提问作者Nikhil Thakur