Laravel Vue用Ziggy报类型错误: Cannot call a class as a function

架构老林

2026-10-23

报错核心原因

控制台抛出的Cannot call a class as a function本质是导入的ziggy模块拿到的是Route类构造函数，而非可直接调用的路由生成辅助函数，触发了JS语法层对类的调用保护机制。该问题多为参考旧版Ziggy教程配置，未适配新版本的模块导出逻辑导致。

分步排查修正

调整webpack别名配置
你当前在webpack.mix.js中手动配置的ziggy别名，强制将模块路径指向了vendor/tightenco/ziggy/src/js/route.js这个Route类源文件，跳过了Ziggy内置的可调用方法导出逻辑。建议直接删除这段手动别名配置（Ziggy安装后会自动注册模块解析规则，无需手动配置）；如果确实需要保留别名，将路径指向调整为path.resolve('vendor/tightenco/ziggy/src/js/index.js')，不要直接指向类定义文件。
修正app.js内的模块导入逻辑
调整Ziggy相关的导入代码，确保拿到的是可直接调用的route辅助函数，而非类本身：
```
// 替换原有错误的类导入
import { route } from 'ziggy-js';
import { Ziggy } from './ziggy';
```
优化全局Vue mixin的绑定逻辑
原有的箭头函数透传逻辑没有问题，简化后可直接将导入的route方法挂载到全局mixin，无需额外嵌套参数传递：
```
Vue.mixin({
  methods: {
    route
  }
});
```
清理冗余无效代码
删除app.js中多余的组件注册语句Vue.component('extend', extend);：extend是VeeValidate的校验规则定义工具，不属于需要全局注册的Vue组件，这段代码会触发无意义的控制台警告，和当前Ziggy报错无关但属于配置冗余。