WebStorm环境下JavaScript无法识别相对路径导入如何解决

以上是WebStorm中的项目结构，导入Objects.js时，只有写完整三层相对路径的语句可以正常运行：

import * as Objects from "../../ecosystem/js/world/Objects.js";

切换为以下任意写法都会报错：

import * as Objects from "../js/world/Objects.js";
import * as Objects from "./js/world/Objects.js";
import * as Objects from "js/world/Objects.js";

报错信息为GET http://localhost:63342/js/world/Objects.js net::ERR_ABORTED 404 (Not Found)，实际请求的URL缺失了ecosystem文件夹层级。
Objects.js的导出语句如下：

export {Sphere, LightIndicator, MouseFollower, Terrain, Box};

以下是3种简洁可行的方案：

• 方案1：配置模块解析别名（推荐）
  如果你用Vite、Webpack、Rollup这类前端构建工具，可以直接给ecosystem目录配置全局别名，之后不需要再计算相对路径层级。以Vite为例，在vite.config.js中添加如下配置：

  import path from 'path'
  export default {
    resolve: {
      alias: {
        '@eco': path.resolve(__dirname, 'ecosystem')
      }
    }
  }
  

  之后导入语句可以直接写成：

  import * as Objects from '@eco/js/world/Objects.js'
  

• 方案2：调整WebStorm服务根目录
  出现路径缺失是因为WebStorm内置的本地开发服务默认将项目根目录作为服务的根路径，你可以打开WebStorm的运行/调试配置，将「工作目录」调整为ecosystem文件夹的上级目录，或者直接将ecosystem文件夹标记为项目的资源根目录，这样相对路径的解析基准就会自动补全ecosystem层级。

• 方案3：使用绝对路径导入
  不想改配置的话可以直接使用从服务根目录出发的绝对路径，导入语句写成：

  import * as Objects from '/ecosystem/js/world/Objects.js'
  

  开头的斜杠代表从服务根路径开始查找文件，不需要计算当前文件的相对层级，也不会出现路径缺失的问题。

内容的提问来源于stack exchange，提问作者Kayra Uckilinc