未捕获的语法错误：Laravel/Vue 应用程序中出现意外的标记“<”答案

【问题标题】：Uncaught SyntaxError: Unexpected token '<' in Laravel/Vue Application未捕获的语法错误：Laravel/Vue 应用程序中出现意外的标记“<”
【发布时间】：2021-03-29 23:53:56
【问题描述】：

我正在开发一个 Laravel/Vue 单页应用程序，但一开始我收到一条错误消息：

Uncaught SyntaxError: Unexpected token '

这是我的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
});

以下是包含routes 的router.js 文件：

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：

【问题讨论】：

您得到的导致错误的网络响应是什么？您正在调用某些东西并期望返回 JSON，但是，响应很可能是 HTML。找到该内容并查看其内容。这很可能是一个错误，至少会提示您要查看的内容。
@GregSchmidt 这是在将字符串解析为 JSON 但它是“some error

标签： javascript php laravel vue.js

【解决方案1】：

问题已找到，它来自 laravel 的 asset() 函数，因为由于某些原因，它无法从 public 目录中获取 app.js，导致应用程序返回 html 页面，因为在web.php 中，我告诉它对url 中/ 之后的任何内容都执行相同的控制器操作。现在我编辑了<script src="{{ asset('js/app.js') }}" defer></script> 行并将其更改为<script src="{{ asset('public/js/app.js') }}" defer></script>，它正确选择了js 文件并返回处理Single Page Application routes 的js code，我不再看到问题了。

感谢大家参与并帮助我找出问题。

【讨论】：