如何在Vercel的api目录及前端统一使用绝对路径导入模块？

架构老林

2026-8-13

你的理解完全正确

前端代码里的shared/hello是Vite配置的路径别名，Vite在构建或开发时会把这个别名映射到本地文件系统的实际路径（比如src/shared/hello）。但api目录的代码运行在Node.js环境中，Node默认会把shared/hello当成第三方npm包去node_modules里查找，自然找不到对应的模块，所以报Cannot find module错误。

实现前后端通用绝对路径的方法

完全可行，核心是让Node.js也能识别这个路径别名，同时和Vite的配置保持一致，具体步骤如下：

1. 统一配置路径别名

先在tsconfig.json里配置TypeScript的路径映射（用JS的话可以用jsconfig.json）：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "shared/*": ["src/shared/*"]
    }
  }
}

同时在Vite配置文件（vite.config.ts）里同步这个别名：

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

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

2. 让Node.js识别别名

Node本身不支持TypeScript的paths配置，需要借助工具tsconfig-paths：

安装依赖：
```
npm install --save-dev tsconfig-paths
```
在api目录的入口文件（比如api/index.ts）最顶部添加注册代码：
```
import 'tsconfig-paths/register'
```
本地开发启动api服务时，在package.json的脚本里加上tsconfig-paths/register的引用：
```
"scripts": {
  "api:dev": "ts-node -r tsconfig-paths/register api/index.ts"
}
```