vue-cli+webpack项目修改项目名称问题:
使用vue-cli+webpack创建的项目,修改文件名称或者更改文件的位置,运营时会报错,是因为npm项目,在安装依赖(node_nodules)时,会记录当前的文件路径,当修改之后就无法正常启动。
解决办法:
1 删除 node_modules 文件夹(如果修改项目名称,需要在在package.json中修改对应的name)
2 重新安装依赖 npm install
3 启动项目 npm run dev
vue-cli+webpack项目修改项目名称问题:
使用vue-cli+webpack创建的项目,修改文件名称或者更改文件的位置,运营时会报错,是因为npm项目,在安装依赖(node_nodules)时,会记录当前的文件路径,当修改之后就无法正常启动。
解决办法:
1 删除 node_modules 文件夹(如果修改项目名称,需要在在package.json中修改对应的name)
2 重新安装依赖 npm install
3 启动项目 npm run dev
Laravel5.4 其实坑不少、这里说明一下
编译的时候会报错: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 目录名称写错了
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的错误,编译完成,前端页面启动过程抛异常
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' };
Laravel 本身对前端开发就提供了很多支持,5.3 更是直接引入了 Vue 这个目前最流行的轻量级前端框架,这篇文章使用一个简单的例子说明一下怎么在laravel中直接使用vue,从而让让前端开发和后端无缝。
首先声明: 在测试这个5.4版本的时候遇到过很多坑,将集中在这一篇文章中说明
我这里下载laravel包直接是在网页下的,当然你也可以使用Compose来下载新建项目
composer create-project --prefer-dist laravel/laravel Laravel54 // 新项目名为 Laravel54
cd Laravel54 //切换项目目录
npm install // 速度慢的请自行切换淘宝镜像 cnpm安装
安装完前端依赖之后目录大致如下:
配置虚拟主机这里不作过多介绍,入口目录为public
修改 routes/web.php 文件为:
Route::get('/', function () { return view('index'); });
在 resources/assets/js/components 目录下新建 Hello.vue 文件:
<template> <div> <h1>{{ msg }}</h1> </div> </template> <script> export default { data() { return { msg: 'Hello World' } } } </script>
//Vue.component('example', require('./components/Example.vue'));//注释掉原来的默认组件 Vue.component('hello', require('./components/Hello.vue'));//引入hello组件
在 resources/views 目录下新建 index.blade.php 文件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <meta name="csrf-token" content="{{ csrf_token() }}"> </head> <body> <div id="app"> <!--这里加入hello组件--> <hello></hello> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
说明:你可能在其他教程中看到有的在使用 assets 函数,这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件,而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的
npm run dev
方法一:
找到配置文件php.ini,修改为下面内容,保存并重启服务
session.save_handler = redis session.save_path = "tcp://127.0.0.1:6379"
方法二:
直接在代码中加入以下内容:
ini_set("session.save_handler", "redis"); ini_set("session.save_path", "tcp://127.0.0.1:6379");
注:如果配置文件redis.conf里设置了连接密码requirepass,save_path需要这样写tcp://127.0.0.1:6379?auth=authpwd ,否则保存session的时候会报错。
示例代码:
//ini_set("session.save_handler", "redis"); //ini_set("session.save_path", "tcp://127.0.0.1:6379"); session_start(); //存入session $_SESSION['class'] = array('name' => 'toefl', 'num' => 8); //连接redis $redis = new redis(); $redis->connect('127.0.0.1', 6379); //检查session_id echo 'session_id:' . session_id() . '; //redis存入的session(redis用session_id作为key,以string的形式存储) echo 'redis_session:' . $redis->get('PHPREDIS_SESSION:' . session_id()) . '; //php获取session值 echo 'php_session:' . json_encode($_SESSION['class']);
'session' => [ 'prefix' => 'module', 'type' => 'redis', 'auto_start' => true, // redis主机 'host' => '127.0.0.1', // redis端口 'port' => 6379, // 密码 'password' => '', ]
vuetp在0.2版本中加入了权限控制管理和菜单管理,基类统一控制 菜单统一读取
本项目现已全部开源
官网地址及演示:www.vuetp.com
如果大家觉得对自己有帮助的话,不要忘了给个Star ^_^