Question

我只是试图用laravel学习vuejs并且无法使示例组件正常工作。

我已经创建了一条新的路线来简单地为vue示例服务。

create.blade.php

<!DOCTYPE html>
<html>
<head>
<title>VUE</title>
</head>

<body>

<h1>example</h1>

<div id="app">

<example></example>

</div>

<script src="/js/app.js"></script>
</body>
</html>

app.js和example.vue文件完全一样开箱即用（所以我不打算在这里显示example.vue

require('./bootstrap');

window.Vue = require('vue');

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

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

我有npm run watch正在运行，似乎已经构建了应用程序文件。

控制器和路由正常，因为页面正在加载，但我收到控制台错误如下

app.js:1697 Uncaught TypeError: Cannot read property 'csrfToken' of 
undefined
at Object.<anonymous> (app.js:1697)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:778)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:41430)
at __webpack_require__ (app.js:20)
at app.js:66
at app.js:69

当我点击chrome中的控制台错误时，它指向app.js中的行：

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = 
window.Laravel.csrfToken;

是否抱怨csrftoken因为我已将其用作刀片模板？我怎样才能让它在laravel中工作，这样我才能玩耍并学习vuejs？

Answer 1

它抱怨的代码位于resources/assets/js/bootstrap.js源代码中，您将看到app.js文件顶部正在引用该代码。在您的刀片文件中，在包含app.js之前，您可以设置csrf令牌值。

<script>
    window.Laravel.csrfToken = {{ csrf_token() }};
</script>
<script src="/js/app.js"></script>

或者，或者，如果您只想按原样播放示例，则可以从bootstrap.js中删除该行代码。但是，一旦你开始更多地使用VueJS，你可能会需要它。

Answer 2

我认为使用以下内容修改bootstrap.js文件（在axios导入行之后）会更好：

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    'X-Requested-With': 'XMLHttpRequest'
};

laravel out of box vuejs示例不起作用

2 个答案: