SvelteKit 2.0生产服务端启用source map实现日志可读且源码不暴露

Source Map 基础原理 #

Source Map 是一个映射文件，它将打包/压缩后的生产代码与你的原始源码建立行号、列号的对应关系。当代码抛出错误时，工具可以通过这个映射文件，把打包代码里的错误位置转换成原始源码的位置，大幅降低调试难度：

• 浏览器端：如果能获取到 Source Map，开发者工具会直接显示原始源码的错误位置；反之则只能看到混淆后的打包代码。
• 服务端：Node.js 本身不会自动解析 Source Map，需要额外配置才能让服务端日志输出原始源码的错误位置。

build.sourcemap: 'hidden' 到底是什么？ #

这个 Vite 配置的作用是：生成 Source Map 文件，但不在打包后的 JS 文件末尾添加 //# sourceMappingURL=xxx.map 注释。这样浏览器因为找不到映射文件的路径，就无法加载和解析 Source Map，自然看不到你的原始源码；但生成的 .map 文件会保留在打包目录里，可供服务端使用。

你之前配置后没达到预期，核心原因是服务端的 Node.js 没有启用 Source Map 解析能力。

完整解决步骤 #

1. 保持 Vite 的 Hidden Source Map 配置 #

在 vite.config.js 中保留以下配置，确保生成 Source Map 但不暴露给浏览器：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  build: {
    sourcemap: 'hidden'
  }
});

2. 让 Node.js 解析服务端的 Source Map #

有两种可靠的方式启用服务端的 Source Map 解析：

方式一：启动服务时添加 Node 参数

修改 package.json 里的生产启动/预览脚本，加上 --enable-source-maps 参数：

{
  "scripts": {
    "preview": "node --enable-source-maps build/index.js",
    "start": "node --enable-source-maps build/index.js"
  }
}

这种方式无需额外安装依赖，简单直接。

方式二：使用 source-map-support 包

如果需要更灵活的控制（比如自定义错误处理），可以安装并启用 source-map-support：

1. 安装依赖：

   npm install source-map-support --save-prod
   

2. 在服务端入口（比如 src/hooks.server.js）顶部添加代码：

   import { createRequire } from 'module';
   const require = createRequire(import.meta.url);
   require('source-map-support').install();
   

3. 部署时带上 Source Map 文件 #

打包后生成的 .map 文件会在 build 目录下，部署服务时要将这些文件一起上传到服务器（无需对外暴露，Node.js 会从本地文件系统读取它们）。

验证效果 #

• 浏览器端：打开开发者工具的 Sources 面板，只能看到打包后的压缩代码，无法查看原始源码。
• 服务端：当服务端代码抛出错误时，日志会直接显示原始源码的文件名、行号和列号，和开发环境的体验一致。

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