如何指定相对于项目根目录的路径简化模块导入？

你只需要给项目配置路径别名，将别名映射到项目根目录或者常用的src目录，就可以彻底避免写多层../的繁琐导入。 #

第一步：配置编辑器路径识别（避免IDE飘红） #

在项目根目录新建（如果已有就修改）jsconfig.json（纯JS项目）或tsconfig.json（TS项目），添加如下配置：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      // 将@映射到项目下的src目录，可根据需求自行修改映射路径
      "@/*": ["src/*"]
    }
  },
  // 排除不需要识别的目录，提升性能
  "exclude": ["node_modules", "dist"]
}

配置完成后，你原来的导入语句

import Register from "../../../../../../../../src/components/register/Register";

就可以直接简化成

import Register from "@/components/register/Register";

如果需要直接映射到项目根目录而非src目录，把paths里的配置改成"@/*": ["./*"]即可。 #

第二步：配置构建工具识别别名（避免打包报错） #

上面的配置仅能让编辑器识别路径，还需要给你使用的构建工具添加对应别名配置，打包时才不会报错，不同工具配置方式如下：

• Vite项目：修改根目录下的vite.config.js/ts

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
      // 映射根目录就改成 path.resolve(__dirname, './')
    }
  }
})

• 原生Webpack / 旧版Vue CLI项目：
  原生Webpack修改根目录webpack.config.js：

  const path = require('path')
  module.exports = {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src/')
      }
    }
  }
  

  Vue CLI项目修改根目录vue.config.js：

  const path = require('path')
  module.exports = {
    configureWebpack: {
      resolve: {
        alias: {
          '@': path.resolve(__dirname, 'src/')
        }
      }
    }
  }
  

• Create React App项目：
  未eject配置的情况下，可借助react-app-rewired+customize-cra修改配置，在根目录新建config-overrides.js：

  const { override, addWebpackAlias } = require('customize-cra')
  const path = require('path')
  
  module.exports = override(
    addWebpackAlias({
      '@': path.resolve(__dirname, 'src')
    })
  )
  

所有配置修改完成后，记得重启本地开发服务、重启IDE，配置才会生效。除了@之外你也可以自定义其他别名，比如单独给组件目录配置别名"@components/*": ["src/components/*"]，导入时可以直接写import Register from "@components/register/Register"。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture