记一次vue脚手架打包生成的js里面变量逻辑错误的解决

问题背景

开发环境调用threejs,实现3d功能组件，开发环境测试正常，打包部署到现场后异常。浏览器控制台，报变量 i和 r，没有定义下图是点击报错地方打开的控制台截图。可以看到有 i r 变量。

1. 解决思路
   开发调试没有问题，那肯定是打包之后命名的变量存在不正确的逻辑了。肯定不能修改dist里面打包之后的代码，这样后面每次都要改，那么就要弄明白为什么变量i r 会报错，怎么出现的。拿这次的报错举例，是Object3D里面的raycast 方法，编译压缩后错误，我们需要取找源码，对比研究。
2. 问题解决
   我们在node_modules下找到threejs源码，对threejs源码中的方法进行阅读研究，发现npm打包时候调用的是build下面的three.module.js。找到raycast 对命令错误的变量进行增加命名处理 就是 let 新增变量 = 编译报错的变量。问题解决。
   
   这是因为打包命名变量 变量从 a - z 进行命令，难免出现重复，新增变量之后在一个scope内就可以重新进行a-z变量循环命名，可以解决这个问题。
   修改后，重新打包，部署运行正常。
3. 后记
   这种问题的解决需要不慌不乱，分析问题根源，选择正确的处理方式。