Next.js如何为src目录的同级目录配置可用的路径别名

1 修正jsconfig.json配置 #

你将baseUrl设为项目根目录的配置逻辑正确，补全通配符和生效范围即可：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/ethereum/*": ["./ethereum/*"],
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*", "ethereum/**/*"]
}

include字段为必填项，缺失会导致IDE识别不到src目录外的别名规则

2 适配项目打包工具配置 #

jsconfig仅用于IDE智能提示、路径跳转，打包阶段的别名识别需要单独给构建工具配置，常见工具配置示例如下：

• Vite（vite.config.js）

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

export default defineConfig({
  resolve: {
    alias: {
      '@/ethereum': path.resolve(__dirname, './ethereum'),
      '@': path.resolve(__dirname, './src')
    }
  }
})

• Vue CLI（vue.config.js）

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

• Create React App（以craco插件配置为例）

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

3 生效验证 #

配置完成后重启IDE、重启项目开发服务即可生效，导入示例：

// 原相对路径写法
import contract from '../../ethereum/contract.js'
// 别名写法
import contract from '@/ethereum/contract.js'

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