Uncaught SyntaxError: неожиданный токен '<' в приложении Laravel/Vue
Я работаю над одностраничным приложением Laravel/Vue, но в самом начале я получил сообщение об ошибке:
Uncaught SyntaxError: неожиданный токен '<'
Вот мой app.blade.php файл макета:
<!DOCTYPE html>
<html lang = "{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name = "csrf-token" content = "{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src = "{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel = "dns-prefetch" href = "//fonts.gstatic.com">
<link href = "https://fonts.googleapis.com/css?family=Nunito" rel = "stylesheet">
<!-- Styles -->
<link href = "{{ asset('css/app.css') }}" rel = "stylesheet">
</head>
<body>
<div id = "app">
<nav class = "navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class = "container">
<a class = "navbar-brand" href = "{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse" data- target = "#navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "{{ __('Toggle navigation') }}">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class = "navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class = "navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class = "nav-item">
<a class = "nav-link" href = "{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class = "nav-item">
<a class = "nav-link" href = "{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class = "nav-item dropdown">
<a id = "navbarDropdown" class = "nav-link dropdown-toggle" href = "#" role = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" v-pre>
{{ Auth::user()->name }} <span class = "caret"></span>
</a>
<div class = "dropdown-menu dropdown-menu-right" aria-labelledby = "navbarDropdown">
<a class = "dropdown-item" href = "{{ route('logout') }}"
onclick = "event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id = "logout-form" action = "{{ route('logout') }}" method = "POST" style = "display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class = "py-4">
@yield('content')
</main>
</div>
</body>
</html>
Вот home.blade.php:
@extends('layouts.app')
@section('content')
<App></App>
@endsection
Вот web.php:
<?php
Auth::routes();
Route::get('/{any}', 'AppController@index')->where('any', '.*');
Ниже приведен файл app.js:
import Vue from 'vue';
import router from './router';
import App from './components/App';
require('./bootstrap');
const app = new Vue({
el: '#app',
components: {
App
},
router
});
Ниже приведен файл router.js, который включает routes:
import Vue from 'vue';
import VueRouter from 'vue-router';
import ExampleComponent from './components/ExampleComponent';
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{ path: '/', component: ExampleComponent },
],
mode: 'history'
});
Я разместил все code здесь, в этом вопросе, и нет ничего лишнего, что вызывает ошибку.
Вот скриншот вкладки Network, на которой нет 404:
@VLAZ Response — это только кнопки Login и Registration, компонент App не отображается.
Какой ответ сети вы получаете, что вызывает ошибку? Вы что-то вызываете и ожидаете ответ в формате JSON, однако ответ, скорее всего, будет HTML. Найдите этот контент и посмотрите, что он говорит. Очень вероятно, что это ошибка, которая, по крайней мере, даст вам подсказку, на что обратить внимание.
@VLAZ: Я еще ничего не называл, приложение находится в самом начальном состоянии, я добавил все файлы и код в пост. У меня нет ничего другого.
@GregSchmidt это ошибка, возникающая из JavaScript при анализе строки как JSON, но она «<». Обычно это происходит потому, что он пытается разобрать что-то вроде "<html>какая-то ошибка</html>". Это не синтаксическая ошибка в PHP, но один из маршрутов создает недопустимый JSON. И скорее всего страница с ошибкой. Это может быть отсутствующий маршрут (поэтому вы получаете страницу с описанием 404) или какая-то ошибка сервера (приводящая к 500) или что-то в этом роде.
Это ошибка JavaScript, а не PHP. Откройте инструменты разработчика вашего браузера, чтобы проверить сетевой запрос, который не удалось выполнить, и перейдите оттуда. Возможно, вы еще не звонили, но Vue определенно это сделал. Один из них, вероятно, возвращает HTML вместо ожидаемого JSON.
Если вы перейдете на вкладку «Сеть» в консоли разработчика в Chrome, весьма вероятно, что вы найдете хотя бы один сетевой запрос, окрашенный в красный цвет. Скорее всего, одна из них — это ошибка 404, возвращаемая вашим сервером с конечной точки, от которой ваше приложение ожидает JSON. Ошибка вызвана тем, что приложение не может проанализировать ответ HTML (содержащий теги, начинающиеся с <) как JSON. Мы не можем найти для вас ошибочный запрос и не можем посоветовать, как изменить ни запрос, ни сервер, чтобы этого не произошло. Не из того, что вы предоставили до сих пор.
Нажмите на этот сетевой запрос для «app.js» и посмотрите, каково его фактическое содержимое. Вероятно, какая-то HTML-страница, а не код JS.
@deceze: я щелкнул по нему, он показывает ту же домашнюю страницу.
Это означает, что ваш сервер обслуживает одну и ту же HTML-страницу для любого URL-адреса, который вы запрашиваете. Вот твоя проблема.
@deceze @tao @Greg : Проблема обнаружена из-за того, что функция asset() неправильно выбирает файл app.js из каталога public. Теперь я изменил его на asset('public/js/apps.js'), и все заработало. Если вопрос будет открыт, я могу опубликовать свой ответ.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема обнаружена, и она исходила из функции asset() laravel, поскольку по некоторым причинам она не могла получить app.js из каталога public, из-за чего приложение возвращало страницу html, потому что в web.php я сказал ему нажать такое же действие контроллера для всего, что следует после / в URL. Теперь я отредактировал строку <script src = "{{ asset('js/app.js') }}" defer></script> и изменил ее на <script src = "{{ asset('public/js/app.js') }}" defer></script>, которая правильно выбирает файл js и возвращает js code, который обрабатывает Single Page Application routes, и я больше не вижу проблемы.
Спасибо всем за участие и помощь в решении проблемы.
Какой ответ вы получаете, который вызывает ошибку?