vue+laravel终极混合开发模式部署

这几天终于开始捣腾SPA了,其实vue+laravel是可以做前后端分离的,只是我们一个大项目里包裹了两个小项目,现在还是混合开发,但是配置上来说走了蛮多坑,这里也分享一下.友情提醒这篇文章只适合使用过vue的旁友!!!

本身在之前我们一直是用laravel视图做不需要交互的数据绑定,而laravel5.4版本自带vue,所以如果你们也是这样开发的,你们的项目里应该会有个这玩意


vue+laravel终极混合开发模式部署_第1张图片

没错!!!打开它,你会看到laravel已经给配置了vue的环境


vue+laravel终极混合开发模式部署_第2张图片

你只要在项目目录`npm install --save-dev`就可以把这些环境都装下来

然后,接下来是重头戏,很多刚刚前后端分离的人也会搞混,网上也很少有资料

敲黑板请前端同学记住,vue+laravel模式,是后台只给一个blade.php模板文件,剩下的,全都自己在resources/assets/js下面写!包括路由!js,sass等等!

来一张结构图


vue+laravel终极混合开发模式部署_第3张图片

然后!关键的来了,我们写的东西怎么引用到blade.php模板引擎上去?

打开你的终端!到项目目录,`npm run dev`

如果你没有配错路由写错语法等等自己写错的情况,现在会用laravel-mix帮你在项目根目录/public/js/下生成app.js

然后我们到blade.php上引用刚刚生成的app.js即可!


laravel-mix是啥?这就是一个超级无敌缩减版的webpack,具体可以看官方github:laravel-mix

目前这种工作方式对于直接用ftp在服务器上写代码的同学不是很友好,因为你改完一个vue文件laravel-mix可以自动打包,但是app.js需要你手动ftp上传..如果在本地有docker环境的同学!!恭喜你,你找到了前端敲代码怎么爽怎么来的方法

你可能感兴趣的:(vue+laravel终极混合开发模式部署)