Laravel+Vue2.6.14执行npm run prod报TypeError: o is not a function

问题核心 #

npm run prod会对代码做压缩混淆，变量名会被替换成短字符（报错里的o就是被压缩后的变量），报错触发点是this.project_id = res.active_projects这行代码，本质是数据类型不匹配或响应式逻辑异常导致的。

排查与解决步骤 #

• 检查后端返回的数据格式
  开发环境未压缩所以没暴露问题，先确认接口/getclientprojects/{employee_id}返回的active_projects字段：

  • 你的project_id初始值是数字0，如果res.active_projects是数组、对象或非数字类型，赋值后会导致Vue响应式系统出错（比如模板中用project_id做表单绑定、条件判断时类型不匹配）。
  • 可以在生产环境临时添加console.log(JSON.stringify(res))查看完整返回结构，确认active_projects是否存在、类型是否符合预期。

• 修正数据类型匹配逻辑
  根据后端返回的实际格式调整赋值：

  • 如果active_projects是数组，取第一个项目的ID：this.project_id = res.active_projects[0]?.id || 0
  • 如果是字符串类型的数字，转换为数字：this.project_id = Number(res.active_projects) || 0
  • 如果字段可能不存在，添加兜底判断：this.project_id = res.active_projects ?? 0

• 修复Vue响应式潜在问题
  你的data使用了箭头函数，虽然Vue 2允许，但箭头函数会绑定父作用域的this，可能导致响应式异常，建议改为普通函数：

  data() {
    return {
      employee_id: 1,
      project_id: 0,
      projects_dropdown: [],
    }
  },
  

• 优化异步请求写法
  避免混合使用async/await和.then()，统一写法减少潜在问题：

  async getProjects() {
    try {
      const response = await fetch('/getclientprojects/' + this.employee_id);
      const res = await response.json();
      
      this.projects_dropdown.push(...res.projects);
      
      // 先校验数据类型再赋值
      if (typeof res.active_projects === 'number') {
        this.project_id = res.active_projects;
      } else {
        this.project_id = 0;
      }
    } catch (e) {
      console.error(e);
    }
  }
  

内容的提问来源于stack exchange，提问作者F. Mukwevho