Laravel5.4 其实坑不少、这里说明一下
第一坑:cross-env目录不对
编译的时候会报错:node_modules/cross-env/bin/cross-env.js: No such file or directory
修改方案是修改package.json下面的node_modules/cross-env/bin/cross-env.js为node_modules/cross-env/dist/bin/cross-env.js 目录名称写错了
第二坑:laravel-mix版本太低
fallbackLoader option has been deprecated – replace with “fallback”
loader option has been deprecated – replace with “use”
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
– configuration.output.path: The provided value “public” is not an absolute path!
要把package.json里面laravel-mix版本改成
“laravel-mix”: “^0.10.0”,
然后再执行 npm install
第三坑:X-CSRF-TOKEN问题
第一次使用,通常会遇到一个X-CSRF-TOKEN的错误,编译完成,前端页面启动过程抛异常
Uncaught TypeError: Cannot read property ‘csrfToken’ of undefined
at Object.<anonymous> (app.js:40921)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:11198)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:40943)
at __webpack_require__ (app.js:20)
at app.js:66
at app.js:69
查看编译后的app.js,发现有一段对X-CSRF-TOKEN的处理,默认是从window.Laravel中获取
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': window.Laravel.csrfToken,
// 'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'X-Requested-With': 'XMLHttpRequest'
};
这个变量没有设置,因此报错。
顺藤摸瓜,查源头,入口文件app.js 引用了一个资源文件 resources/assets/js/bootstrap.js,其中对X-CSRF-TOKEN有定义
window.axios = require('axios');
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': window.Laravel.csrfToken,
'X-Requested-With': 'XMLHttpRequest'
};
解决方案:
因为很多时候中间件也会检查CSRF-TOKEN,所以通常我们都习惯在模板文件中设置meta标记来保存CSRF-TOKEN,因此从这里统一获取,处理方式一致
<meta name=“csrf-token“ content=“{{ csrf_token() }}“>
因此,修改bootstrap.js对应代码为:
window.axios = require('axios'); window.axios.defaults.headers.common = {
'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'X-Requested-With': 'XMLHttpRequest' };