如何调试yarn build构建后的Vue应用？构建后报key属性读取错误

开发环境（yarn server启动的dev服务）和生产构建包的运行逻辑存在以下差异，会导致开发时不触发的问题在build后暴露：

• 响应式属性兜底校验被剥离：Vue开发模式会对未声明的属性、空值访问做友好警告和部分兜底，生产构建会移除所有开发环境的调试、校验代码，只要代码里访问了undefined/null值的key属性就会直接抛错。最常见触发场景是v-for遍历的列表存在空项、接口返回字段不符合预期，开发时用mock数据没有空值所以没触发。
• 动态资源路径解析失效：如果用了变量拼接的动态import（比如懒加载路由import(@/pages/${routePath}.vue)），开发环境的dev-server可以实时解析路径，生产构建时构建工具无法静态分析出完整路径，会导致组件加载后为undefined，渲染时读取组件配置的key属性触发报错。
• 第三方依赖兼容问题：部分第三方库的ESM和CommonJS导出格式不规范，生产构建做tree-shaking时会误删掉有效导出，导致业务代码调用依赖时拿到undefined，访问其key属性报错。
• 代码压缩导致执行时序变化：生产构建会做代码合并、混淆压缩，部分全局注册的插件、自定义指令如果注册时序写的不严谨，压缩后执行顺序变动，会出现组件渲染时对应指令/插件还未注册的情况，拿到undefined读key报错。

• 开启sourcemap本地构建定位
  直接在项目根目录的vue.config.js（vite项目则是vite.config.js）中打开生产环境sourcemap配置，重新执行build：

  // vue-cli 项目配置示例
  module.exports = {
    productionSourceMap: true // 本地调试时打开，上线前可关闭避免源码泄露
  }
  

  构建完成后本地预览生产包，控制台报错会直接映射到原始源码的具体文件和行号，和开发环境调试体验一致，可以直接定位出错位置。
• 无sourcemap时的断点定位
  如果暂时不方便开sourcemap，直接点击控制台报错信息里的chunk-vendors.js:49跳转到压缩后的代码文件，点击浏览器代码面板的格式化按钮把压缩代码展开，在报错的读取key的那一行打条件断点，断点触发条件设为被读取key的目标对象为undefined，断点触发后查看调用栈，向上翻找属于你业务代码的调用帧，就能定位到是哪个组件、哪段逻辑触发的错误。
• 本地复现缩小排查范围
  build完成后不要直接部署调试，先用脚手架自带的生产包预览命令本地启动服务复现问题：

  # vue-cli 项目
  yarn serve --mode production
  # vite 项目
  yarn preview
  

  本地复现时可以配合Vue Devtools查看组件的props、data状态，优先排查最近改动的动态路由、动态组件、所有带.key访问的逻辑，给可能为空的对象加上可选链?.做临时防御（比如把xxx.key改成xxx?.key），每改一部分重新构建验证，快速缩小问题范围。
• 排除压缩配置问题
  如果以上步骤没定位到问题，先把构建工具的属性混淆（mangle）配置临时关闭，重新构建看报错是否消失，排查是不是压缩工具误改了属性名导致的访问异常。

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