Vue/Vite/Rails栈Sourcemap失效，调试工具报错行号异常求助

1. 补全开发环境Sourcemap配置 #

你当前仅配置了生产构建阶段的build.sourcemap: true，但开发调试场景的Sourcemap需要单独设置。在vite.config.ts中添加开发环境的Sourcemap配置：

export default defineConfig({
  // 新增：使用完整sourcemap避免行号偏移
  devtool: 'source-map',
  build: {
    emptyOutDir: true,
    sourcemap: true
  },
  // ... 其余原有配置保持不变
});

Vite默认的eval模式虽构建速度快，但会导致行号映射失真，换成source-map会生成完整的外部映射文件，精准对应原文件行号。

2. 排查插件对Sourcemap的干扰 #

部分代码转换插件可能破坏Sourcemap结构，建议逐个禁用测试：

• vite-plugin-require：若项目可改用ES模块的import替代CommonJS的require，优先移除该插件；若必须保留，查看插件文档是否有Sourcemap兼容配置。
• vite-plugin-node-polyfills：升级至最新版本，旧版本存在Sourcemap兼容bug：

  npm update vite-plugin-node-polyfills
  

• sassGlobImportPlugin：暂时禁用该插件，验证Sourcemap是否恢复正常，确认是否为该插件导致的问题。

3. 检查Rails端集成配置 #

由于使用vite-plugin-ruby，需确保Rails侧未禁用Sourcemap：
打开config/initializers/vite.rb，确认配置：

ViteRuby.configure do |config|
  config.sourcemap = true # 必须开启
end

随后清理缓存：

vite build --emptyOutDir
rails assets:clean

4. 验证浏览器调试工具设置 #

打开浏览器开发者工具的Settings面板，确保勾选Enable JavaScript source maps和Enable CSS source maps；切换到Sources面板，确认能看到原始.vue文件，而非编译后的bundle文件。

完成上述步骤后重启开发服务器，触发组件中的错误，即可看到正确的错误行号。

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