时间戳

首页 > 解决方案 > 在 php 刀片文件中，客户端令牌 Vue 组件未显示

laravel - 在 php 刀片文件中，客户端令牌 Vue 组件未显示

问题描述

在 Laravel 5.7 中，Passport 安装没有问题，但我的刀片文件中没有得到 vue 组件视图

我在新的 Vue 之前尝试过 app.js 导入和粘贴所有视图组件。运行 npm install，运行 npm dev，观察但它们都不起作用。在 5.7 中虽然没有资产文件夹，但它保存在 resources/js/components

//------app.js ------------//

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue')
);

const app = new Vue({
    el: '#app'
});

//-----token.blade.php ---//

@extends('layouts.app')
@section('content')
    <div id="app">
        <passport-clients></passport-clients>
        <passport-authorized-clients></passport-authorized-clients>
        <passport-personal-access-tokens></passport-personal-access-tokens>
    </div>
    @endsection

标签： laravelvue.jslaravel-passport

解决方案

我在使用 laravel 8.x 时遇到了同样的问题，并解决了如下问题

  1. 确保使用以下命令安装了适当的前端脚手架：

php artisan ui bootstrap 和
php artisan ui vue

  1. 运行以下命令：

npm install 和
npm run dev

  1. 按照以下语法定义视图组件：
    Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue').default
    );

  2. 在刀片视图文件中包含 vue 组件，如下所示：

@extends('layouts.app')
@section('content')

<example-component></example-component>

@endsection

  1. 使用以下命令重新编译您的 vue 组件：

npm 运行开发

推荐阅读