Компонент Vue отображается на локальном хосте, но не на сервере с использованием Laravel 5.4: Passport

Я пытался создать Oauth2.0 использование сервера Passport на Laravel 5.4 следуя https://laracasts.com/series/whats-new-in-laravel-5-3/episodes/13.
Я смог настроить его на local host, но когда я скопировал каталог на мой prod server и попытался получить к нему доступ, мои компоненты vue не загрузились.
Моя БД и все это работало, и я смог зарегистрировать новых клиентов, но он не загрузил vue component панель.

P.S Я думаю, это может быть связано со способом, которым я скопировал папку на сервер, но я не знаю,> я могу предоставить любую другую информацию, если требуется

Я несколько новичок в Laravel и Noob в Vue, поэтому любая помощь будет принята с благодарностью.

Мой 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'
});

мой дом. клинок

@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

0

Решение

Изучите свой блейд layout.app, в этой части кода вы говорите vue искать тег с id = «app» для инициализации vue:

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

Так что, если у вас нет, поместите

<div id="app">

обертка для вашей страницы (или используйте span или измените селектор)

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

0

Другие решения

Проблема, с которой я столкнулся, была связана с тем, что я запускал микс через npm run dev т.е. для развития. Правильный курс действий состоял в том, чтобы построить это, используя npm run production а затем загрузить его на сервер.

0

По вопросам рекламы [email protected]