不经过悉心栽培,花儿开不出鲜艳的花朵;不经过时间的历练,幼苗长不成参天大树。

[Laravel5.4+自身集成Vue2初体验–续]laravel5.4的laravel-mix踩坑记

web 建伟 750℃ 0评论

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' };

转载请注明:Li Jianwei's Blog » [Laravel5.4+自身集成Vue2初体验–续]laravel5.4的laravel-mix踩坑记

喜欢 (0)or分享 (0)
web技术交流群
22765697