如何配置Vite实现磁盘文件读取时的路径重写？

我有一个SvelteKit项目（推测SvelteKit与此问题无关），项目目录结构如下：

vite.config.ts
/src
    /routes
        +server.ts
/external
    somefile.txt

我希望/src/routes/+server.ts能够读取并处理/external/somefile.txt的内容。我已在vite.config.ts中添加了别名配置：

{
    resolve: {
        alias: {
            $external: 'external'
        }
    }
}

该别名在JS导入中可正常工作，但在使用readFile('$external/somefile.txt')时无效。请问是否可通过config.resolve.alias或其他预处理器方案实现路径重写？

Vite的resolve.alias仅作用于模块导入语法（如import语句），不会处理Node.js文件系统API（例如fs.readFile）中的字符串路径，因此直接用别名会失效。以下是几种可行的解决方法：

1. 手动解析绝对路径 #

直接通过Node.js的path模块结合项目根目录来拼接路径，无需依赖Vite别名：

// src/routes/+server.ts
import { readFile } from 'fs/promises';
import path from 'path';

// 基于当前进程的工作目录（项目根目录）解析路径
const filePath = path.resolve(process.cwd(), 'external/somefile.txt');
const content = await readFile(filePath, 'utf-8');

如果需要复用别名逻辑，可以在Vite配置中定义根目录常量，再在代码中引用：

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      $external: 'external'
    }
  },
  define: {
    // 注入项目根目录的绝对路径
    'import.meta.env.VITE_ROOT': JSON.stringify(process.cwd())
  }
});

// src/routes/+server.ts
import { readFile } from 'fs/promises';
import path from 'path';

const filePath = path.join(import.meta.env.VITE_ROOT, 'external/somefile.txt');
const content = await readFile(filePath, 'utf-8');

2. 用预处理器替换别名字符串 #

通过Vite的define配置或自定义插件，在构建阶段自动替换代码中的$external别名：

方法一：使用define全局替换 #

// vite.config.ts
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      $external: 'external'
    }
  },
  define: {
    // 将$external替换为external目录的绝对路径
    '$external': JSON.stringify(path.resolve(process.cwd(), 'external'))
  }
});

之后在代码中直接使用：

// src/routes/+server.ts
import { readFile } from 'fs/promises';

const content = await readFile(`${$external}/somefile.txt`, 'utf-8');

方法二：自定义Vite插件做字符串替换 #

如果需要更灵活的替换规则，可以编写简单的Vite插件：

// vite.config.ts
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  plugins: [
    {
      name: 'alias-replace',
      transform(code) {
        // 替换所有出现的$external为实际绝对路径
        return code.replace(/\$external/g, JSON.stringify(path.resolve(process.cwd(), 'external')));
      }
    }
  ],
  resolve: {
    alias: {
      $external: 'external'
    }
  }
});

这样代码中的$external/somefile.txt会被自动替换为真实的文件路径。

3. 以模块形式导入文件 #

如果文件内容是静态的（构建时即可确定），可以直接用Vite的导入语法读取，这种方式会自动复用已配置的别名：

// src/routes/+server.ts
// ?raw后缀告诉Vite直接读取文件内容作为字符串
import someFileContent from '$external/somefile.txt?raw';

// 直接使用someFileContent变量即可

这种方式无需调用fs.readFile，Vite会在构建阶段将文件内容打包进代码。

内容的提问来源于stack exchange，提问作者sam-w