在 app.js 中没有为 laravel 护照定义 require答案

【问题标题】：require is not defined in app.js for laravel passport在 app.js 中没有为 laravel 护照定义 require
【发布时间】：2017-05-18 12:17:27
【问题描述】：

我想在我的项目中使用 Laravel Passport，我已经按照 Laravel Passport https://laravel.com/docs/5.3/passport 这个教程。

按照本教程学习后，我收到 Uncaught ReferenceError: require is not defined 错误。

请查看我的文件：

gulpfile.js

var elixir = require('laravel-elixir');
require('laravel-elixir-webpack');

elixir(function(mix) {

    mix.scripts('app.js');

    mix.styles([
                'bootstrap.min.css',
                'font-awesome.min.css',
                'gentelella.min.css'
               ],'public/css/app.css');

});

资源/资产/js/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: '#manage-passport'
});

home.blade.php

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

<div class="container" id="manage-passport">

  <!-- let people make clients -->
    <passport-clients></passport-clients>

    <!-- list of clients people have authorized to access our account -->
    <passport-authorized-clients></passport-authorized-clients>

    <!-- make it simple to generate a token right in the UI to play with -->
    <passport-personal-access-tokens></passport-personal-access-tokens>
</div>

@stop

blank.blade.php

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Passport! | </title>

    <meta name="token" id="token" value="{{ csrf_token() }}">
    <!-- Styles -->
    <link href="/css/app.css" rel="stylesheet">

</head>

<body class="nav-md">
    <div class="container body">
        <div class="main_container">
            @yield('content')
        </div>
    </div>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="js/gentelella.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>

    @stack('scripts')

</body>

【问题讨论】：

修改后你吞了吗？
是的，但它显示错误。
你是怎么吞下去的？好像你没有吞下，否则你不会得到那个错误。
将mix.scripts 更改为mix.wekpack
当我更改为 mix.wekpack 时，gulp 给了我以下错误。 Clients.vue 模块解析错误 Clients.vue 失败。 Unexpected token 你可能需要一个合适的加载器来处理这个文件类型 SyntaxError : unexpected token

标签： laravel laravel-passport

【解决方案1】：

可能是没有token的问题？

blank.blade.php

<script>
        window.Laravel = {!! json_encode(['csrfToken' => csrf_token()]) !!}
</script>

另外，检查是否传递了token等参数

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

【讨论】：

你展示了文件resource/assets/js/app.js中的所有代码？
这是因为没有设置token的参数你可能更清楚的创建一个新项目的指令和see how it connects token或者至少看起来像设置parameters@SwapnilChaudhari
如果 csrf token 不存在，你会得到 csrf token mismatch 异常。