Vue 组件显示在本地主机上，但不在使用 Laravel 5.4 的服务器上：Passport

Posted 2023-02-22

【中文标题】Vue 组件显示在本地主机上，但不在使用 Laravel 5.4 的服务器上：Passport

【英文标题】：Vue component showing up in local host but not on server using Laravel 5.4: Passport

【发布时间】：2017-09-23 17:40:19

【问题描述】：

我试图通过关注https://laracasts.com/series/whats-new-in-laravel-5-3/episodes/13 在Laravel 5.4 上使用Passport 设置Oauth2.0 服务器。 我可以在local host 上设置它，但是当我复制prod server 上的目录并尝试访问它时，我的vue 组件没有加载。 我的数据库和所有东西都在工作，我能够注册新客户端，但它没有加载 vue component 面板。

PS 我认为这可能与我将文件夹复制到服务器的方式有关，但我不知道> 如果需要，我可以提供任何其他信息

我对 Vue 中的 laravel 和 noob 有点陌生，因此我们将不胜感激。

我的 app.js

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the javascript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

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'
);

我的家.blade

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <passport-clients></passport-clients>
                <passport-authorized-clients></passport-authorized-clients>
                <passport-personal-access-tokens></passport-personal-access-tokens>
        </div>
    </div>
</div>
@endsection

【问题讨论】：

控制台有错误吗？ id 应用程序的元素在哪里？它在你的布局上吗？您是否尝试为 chrome 安装 vue 开发工具？然后，您可以检查您的绑定等。您是否具有 ssh 访问权限，您是在服务器上还是在本地运行您的 mix / webpack 构建，然后上传所有内容？

@FrankProvost 嗨，根据评论，我在生产模式下运行构建，然后将其上传到服务器，vue 组件工作顺利。但是我遇到了另一个问题，我无法创建新客户端和访问令牌，但会解决它们。谢谢人

【参考方案1】：

我遇到的问题是由于我通过npm run dev 运行混合构建，即用于开发。正确的做法是使用npm run production 构建它，然后将其上传到服务器。

【参考方案2】：

检查你的 layout.app 刀片，在这部分代码中，你告诉 vue 搜索一个 id="app" 的标签来初始化 vue：

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

所以，如果你没有，请放置一个

<div id="app"> 

页面的包装器（或使用跨度或更改选择器）

https://vuejs.org/v2/guide/index.html#Declarative-Rendering