Vue生产构建后Three.js Raycaster报错：Cannot access 'r' before initialization

核心问题定位 #

这个错误本质是ES6变量提升特性在代码压缩时触发的冲突：开发环境未压缩，var/let/const的作用域差异不明显；生产构建时Vue默认使用的Terser压缩工具会对变量重命名，若你的raycast函数里存在循环内外/嵌套循环重复用let/const声明同名变量，压缩后会导致变量初始化顺序错乱，触发"访问未初始化变量"的错误。

直接修复方案 #

1. 修正raycast函数的变量声明 #

检查你的射线检测代码，重点排查for循环里的变量：

• 禁止循环内外使用同名的let/const变量
• 嵌套循环里不要用重复的变量名
• 循环内的变量要么移到外部复用，要么确保每个循环的变量名唯一

错误示例（大概率触发问题的写法）：

function raycast(event) {
  let raycaster = new THREE.Raycaster();
  let mouse = new THREE.Vector2();
  // ...
  let intersects = raycaster.intersectObjects(scene.children);
  // 外层循环用r
  for (let i = 0; i < intersects.length; i++) {
    let r = intersects[i];
    // 内层循环又用r当变量名，压缩后会冲突
    for (let r = 0; r < r.children.length; r++) {
      // 业务逻辑
    }
  }
}

修正后代码：

function raycast(event) {
  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();
  // ...
  const intersects = raycaster.intersectObjects(scene.children);
  // 外层用i，内层用j，变量名完全区分
  for (let i = 0; i < intersects.length; i++) {
    const curIntersect = intersects[i];
    for (let j = 0; j < curIntersect.children.length; j++) {
      const curChild = curIntersect.children[j];
      // 业务逻辑
    }
  }
}

2. 调整Vue构建的压缩配置（临时方案） #

如果暂时改不了代码，可以在vue.config.js里调整Terser的压缩规则，禁用变量重命名或保留特定变量名：

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        require('terser-webpack-plugin')({
          terserOptions: {
            // 禁用变量重命名（会增大包体积，不推荐长期使用）
            mangle: false,
            // 或者精细配置：保留指定变量不被重命名
            // mangle: {
            //   reserved: ['raycaster', 'intersects']
            // }
          }
        })
      ]
    }
  }
}

3. 检查依赖版本兼容性 #

确保Three.js和Vue相关依赖版本匹配，避免工具链bug：

• 建议升级Three.js到r130以上版本
• 保证@vue/cli-service版本与Vue主版本兼容

参考package.json依赖片段：

{
  "dependencies": {
    "vue": "^3.3.4",
    "three": "^0.158.0"
  },
  "devDependencies": {
    "@vue/cli-service": "^5.0.8"
  }
}

验证修复 #

1. 执行npm run buildPro重新构建生产包
2. 用serve dist本地预览生产包，或者部署到测试环境
3. 触发模型的鼠标事件，查看控制台是否还出现错误

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