在 Laravel 中使用 Ziggy for Vue 不断收到“TypeError：无法将类作为函数调用”答案

【问题标题】：Keep getting 'TypeError: Cannot call a class as a function' using Ziggy for Vue in Laravel在 Laravel 中使用 Ziggy for Vue 不断收到“TypeError：无法将类作为函数调用”
【发布时间】：2021-04-25 10:18:56
【问题描述】：

我已经搜索和搜索，但似乎无法找到解决问题的方法。

我已采取以下步骤：

\\Webpack.mix.js
const mix = require('laravel-mix');
const path = require('path');
mix.webpackConfig({
    resolve: {
        alias: {
            ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
        },
    },
});

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
mix.browserSync('127.0.0.1:8008');

然后在我的 app.js 中有

\\app.js
require('./bootstrap');



import Vue from 'vue'


// Ziggy start here
import route from 'ziggy';
import { Ziggy } from './ziggy';

Vue.mixin({
    methods: {
        route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
    },
});
// ziggy end here




import VendorLoginForm from './vue/components/vendors/auth/VendorLoginForm'
import VendorRegisterForm from './vue/components/vendors/auth/VendorRegisterForm'
import EditVendorProfile from './vue/components/vendors/profile/EditVendorProfile'

import { ValidationProvider, ValidationObserver, extend } from 'vee-validate/dist/vee-validate.full.esm';



extend("password", {
    message: "{_field_} must be at least 10 characters long, contain one uppercase, one lowercase, and one number.",
    validate: value => {
        const strong_password = new RegExp(
            "^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{10,})"
        ); // regex to check our strong password
        return strong_password.test(value); //Test the regex. Test function returns a true or false value.
    }
});



import './scripts/validators'

Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);
Vue.component('extend', extend);



const app = new Vue({
    el: '#vue-app',
    components: { VendorLoginForm, VendorRegisterForm, EditVendorProfile }
});

我已经运行了 php artisan 命令来生成 ziggy.js，当我 Ctrl+单击它时它似乎工作正常。

但是当我进入我的组件尝试使用如下路由时

  mounted() {
      console.log(this.route('home.page'))
  },

我得到错误：

app.js:51783 TypeError: Cannot call a class as a function
    at _classCallCheck (app.js:3612)
    at Route (app.js:3630)
    at VueComponent.route (app.js:3345)
    at VueComponent.mounted (app.cbfbd1ac1b8410f1ce58.hot-update.js:172)
    at invokeWithErrorHandling (app.js:51749)
    at callHook (app.js:54109)
    at Object.insert (app.js:53032)
    at invokeInsertHook (app.js:56234)
    at VueComponent.patch [as __patch__] (app.js:56453)
    at VueComponent.Vue._update (app.js:53838)

【问题讨论】：

标签： laravel vue.js vuejs2

【解决方案1】：

当我第一次与 Ziggy 合作时，这是一场噩梦，但我通过以下方式解决了我的问题在资源文件夹php artisan ziggy:generate中创建ziggy.js后@

编辑我的 webpack.mix.js 文件

const mix = require('laravel-mix');
const path = require('path');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

mix.webpackConfig({
    resolve: {
        alias: {
            ziggy: path.resolve('vendor/tightenco/ziggy/dist'),//Note we point to dist folder
        },
    },
});

然后在 App.js 中

import route from 'ziggy';
import {
    Ziggy
} from './ziggy';

Vue.mixin({
    methods: {
        route: (name, params, absolute) => route(name, params, absolute, Ziggy)
    }
});

然后你可以在你的组件中使用路由

console.log(route("home"));

【讨论】：