Laravel-Vue-SSR-SPA提供服务端渲染/单页渲染实现骨架，同时集成webpack打包构建MD5文件名/gzip实现，内置vue-router、vuex、axios等vue封装，并提供PC端SSR渲染方案，Admin常见的方案有三种：前后端分离单页方案、移动端前后端分离单页方案；项目地址，欢迎stargithubhttps://github.com/symenywong...项目需求基于Laravel和Vue提供的强大功能组合，并基于已有项目的实践经验，提供一个完整的laravel-vue集成解决方案，帮助快速搭建一个Laravel-vue集成项目，主要解决以下问题SSR服务端渲染Laravel-vue服务端渲染，即LaravelSSR解决方案，有利于搜索引擎SEO搜索抓取；SPA前后端分离Laravel-vueSPA框架，即前后端分离下的单页面路由方案。前后端通过API交互，可以提供更灵活的开发选择和更高的开发效率。一个好处是app可以和手机h5共享同一个API体系，大大节省了后期业务开发的重复性工作；静态资源缓存熟悉前端开发的同学一定遇到过浏览器缓存静态资源导致的问题，比如js/css等；借助webback，js编译提供了md5文件命名方案，可以有效避免静态文件缓存带来的问题；gzip文件压缩是在前端优化的方案中，是一个非常好的启用服务端gzip压缩来减少资源请求的方案；同样，在webpack中使用compression-webpack-plugin输出gzip文件包，可以实现非常明显的js/css文件体积压缩（大约60%-80%）；如何解决移动终端适配问题终端适配问题是衡量一款移动终端用户体验的基本判断标准。框架采用淘H5页面的终端适配方案。详见https://github.com/amfe/article/issues/17，在基础1rem=75px的基础上，对内置css样式进行适配优化；内置UI框架6.1管理项目内置iview作为后台UI框架，蚂蚁金服AntV/G2作为报表插件，它们都提供优雅的界面设计和丰富全面的文档。iview地址AntV地址6.2移动端项目内置Cube-UI框架，同样，你也可以使用vux框架作为移动端UI框架Cube-UI地址VUX地址6.3PC端内置iview，iview是一款优秀的后台UI框架，这里只是作为一个内置的例子，你可以选择你喜欢的UI框架作为替代laravel服务端渲染是基于spatie/laravel-server-side-rendering，谢谢！解决方案集成首页即前端用户可以看到页面，使用laravel-vue服务端渲染方案SSRadmin项目采用前后端分离架构SPAmobile项目采用前后端分离架构SPA环境要求php环境确保你已经安装了composerLaravel文档composer安装教程nodejs环境确保你已经安装了node，建议安装最新稳定版的nodenode自带npm，node已经安装好了，没必要单独安装npmnode，官网安装完成，查看nodeversion>8.0node-vnpmversion>5.3npm-vInstall，只需2步1.clone代码，安装依赖1.1clone或者下载项目代码，gitclonegitclonehttps://github.com/symenywong/laravel-vue-ssr-spa.git项目clone后，执行以下操作进入当前文件夹，例如当前project文件夹为laravel-vue-ssr-spacd安装前端laravel-vue-ssr-spa1.2依赖npminstall1.3安装composer依赖composerinstall1.4手动修改根目录。env文件，添加如下配置NODE_PATH=/usr/local/bin/2。现在运行服务，查看是否正确启动2.1在项目目录下执行，启动php服务，查看http://localhost:8000/phpartisanserve&npmrunwatch此时浏览器打开http://localhost:8000/,查看各个项目界面2.2构建产环环境，在项目目录下执行，启动webpack自动构建服务，生成jss、css和对应的gzip压缩文件，由于开启了md5文件名和gzip压缩，这里需要一点时间。npmrunbuild的所有准备工作都已经完成，现在可以愉快的开始写代码了！解释项目目录|--app||--http|||--Controllers|--bootstrap|--config|--database|--config|--node_modules|--public|---resources//资源文件||--assets//vue模板渲染|||--管理员|||--首页|||--手机||--sass//sass风格|||--管理员||--首页|||--手机||--views//laravel解析刀片模板|||--管理员|||--首页|||--mobile|--routes|--storage|---tests|--vendor|--resources|--md5File.js|--packaje.json|--webpack.config.js|--webpack.mix.js...npmscriptcommand/package.jsonexplainproject内置命令如下"scripts":{"dev":"npmrundevelopment","build":"npmrunproduction&&npmruncopy","development":"cross-envNODE_ENV=developmentnode_modules/webpack/bin/webpack.js--progress--hide-modules--config=./webpack.config.js",“watch”：“node./md5File.js--env=dev&&npmrundevelopment----watch”，“watch-poll”：“npmrunwatch----watch-poll”，“hot”："cross-envNODE_ENV=developmentnode_modules/webpack-dev-server/bin/webpack-dev-server.js--inline--hot--config=node_modules/laravel-mix/setup/webpack.config.js","production":"cross-envNODE_ENV=productionnode_modules/webpack/bin/webpack.js--no-progress--hide-modules--config=./webpack.config.js","ii":"npminstall--registryhttps://registry.npm.taobao.org","copy":"node./md5File.js"},npmrunwatch启动dev开发环境，开启动态热加载、sass预处理等npmrunbuild在生产环境中执行编译打包任务。执行完成后会生成js和css打包压缩文件。npmrunii如果被墙用户执行npm安装失败，可以选择该命令切换到淘宝镜像源安装webpack。说明1.webpack.config.js说明laravel-mix本身有内置的webpack打包方案，但是有以下问题需要解决。生产环境每次生成的js/css文件名称相同，会造成浏览器缓存，无法有效避免缓存的影响。因此，在使用webpack打包时，文件名经过md5扩展，文件更改会生成新的md5文件名js/css静态资源请求，导致用户等待时间过长。如何压缩文件大小，减少资源请求，将大大提升用户体验。框架内置compression-webpack-plugin对生成的文件进行gzip压缩，同时生成非压缩文件和压缩文件。需要注意的是这个方案需要服务器开启gzip请求配置2.webpack.mix.js描述框架内置了3套工程方案PC内置插件>iview>vue-router>vuex>axiosadmin内置>iview>vue-router>vuex>axiosmobile内置>cube-ui>vue-router>vuex>axios//homemix.js('resources/assets/home/entry-client.js','public/index/js').js('resources/assets/home/entry-server.js','public/index/js').sass('resources/sass/home/app.scss','public/index/css')//adminmix.js('resources/assets/admin/app.js','public/admin/js').sass('resources/sass/admin/app.scss','public/admin/css');//mobilemix.js('resources/assets/mobile/app.js','public/mobile/js').sass('resources/sass/mobile/app.scss','public/mobile/CSS');注意SSR项目不能使用router-link进行跳转：PC端前端渲染项目SSR内置集成了vue-router分发页面，但是如果使用
