Svelte+Vite项目配置Sourcemap调试运行时错误咨询

1. 配置Vite全局SourceMap #

在项目根目录的vite.config.ts中，添加开发服务器的SourceMap配置，确保生成完整的源码映射：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  server: {
    sourcemap: true, // 开启开发环境的SourceMap支持
  },
});

2. 配置Svelte编译器生成SourceMap #

Svelte文件编译时需要单独开启SourceMap，否则无法将编译后的代码映射回.svelte源码。修改vite.config.ts中的Svelte插件配置：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [
    svelte({
      compilerOptions: {
        sourcemap: true, // 强制Svelte编译时生成对应源码的SourceMap
      },
    }),
  ],
  server: {
    sourcemap: true,
  },
});

3. 验证浏览器开发者工具设置 #

确保浏览器已开启SourceMap解析：

• 打开Chrome DevTools → 点击右上角设置图标 → 选择Preferences → 在Sources栏目下勾选Enable JavaScript source maps和Enable CSS source maps

完成以上配置后，重启Vite开发服务器，再次触发运行时错误时，错误栈会直接指向.svelte文件中的对应代码行，便于调试。

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