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

      发布在:Notes, 前端技术      评论:0 条评论

这几天终于开始捣腾SPA了,其实vue+laravel是可以做前后端分离的,只是我们一个大项目里包裹了两个小项目,现在还是混合开发,但是配置上来说走了蛮多坑,这里也分享一下.友情提醒这篇文章只适合使用过vue的旁友!!!
本身在之前我们一直是用laravel视图做不需要交互的数据绑定,而laravel5.4版本自带vue,所以如果你们也是这样开发的,你们的项目里应该会有个这玩意
vue+laravel终极混合开发模式部署

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

vue+laravel终极混合开发模式部署
你只要在项目目录npm install --save-dev就可以把这些环境都装下来
然后,接下来是重头戏,很多刚刚前后端分离的人也会搞混,网上也很少有资料
敲黑板请前端同学记住,vue+laravel模式,是后台只给一个blade.php模板文件,剩下的,全都自己在resources/assets/js下面写!包括路由!js,sass等等!
来一张结构图
vue+laravel终极混合开发模式部署
然后!关键的来了,我们写的东西怎么引用到blade.php模板引擎上去?
打开你的终端!到项目目录,npm run dev
如果你没有配错路由写错语法等等自己写错的情况,现在会用laravel-mix帮你在项目根目录/public/js/下生成app.js
然后我们到blade.php上引用刚刚生成的app.js即可!
vue+laravel终极混合开发模式部署
laravel-mix是啥?这就是一个超级无敌缩减版的webpack,具体可以看官方github:laravel-mix
目前这种工作方式对于直接用ftp在服务器上写代码的同学不是很友好,因为你改完一个vue文件laravel-mix可以自动打包,但是app.js需要你手动ftp上传..如果在本地有docker环境的同学!!恭喜你,你找到了前端敲代码怎么爽怎么来的方法

Responses