Laravel-Vue-SSR-SPA 服务端渲染 / 单页面渲染实现骨架

Laravel-Vue-SSR-SPA#

提供服务端渲染 / 单页面渲染实现骨架,同时集成 webpack 打包构建 MD5 文件名 /gzip 实现,内置 vue-router,vuex, axios 等 vue 套件,提供 PC 端 SSR 渲染方案,Admin 前后端分离单页面方案,Mobile 前后端分离单页面方案等三种常见方案;


项目地址,欢迎 star

github https://github.com/symenywong/laravel-vue-...

项目需求#

基于 LaravelVue 提供的强大的功能组合,并根据已有项目实践经验,提供完整的 laravel-vue 集成方案,帮助快速搭建 Laravel-vue 集成项目,主要解决如下问题

  1. SSR 服务端渲染

    Laravel-vue 服务端渲染,即 Laravel SSR 方案,利于搜索引擎的 SEO 搜索抓取;

  2. SPA 前后端分离

    Laravel-vue SPA 框架,即前后端分离下的单页面路由方案,前后端通过 api 实现交互,可以提供更加灵活的开发选择以及更高的开发效率,同时潜在的一个优势是 app 可以与移动端 h5 共用同一套 api 体系,极大节省后期业务开发的重复工作;

  3. 静态资源缓存

    熟悉前端开发的同学一定碰到过需要解决浏览器缓存静态资源造成的问题,比如 js/css 等;
    在 weback 的帮助下,js 的编译提供 md5 文件命名方案,可以有效的避免静态文件缓存造成的问题;

  4. gzip 文件压缩

    在前端优化的方案里,开启服务端 gzip 压缩是一种非常好的减少资源请求的方案;
    同样的,在 webpack 里使用 compression-webpack-plugin 输出 gzip 文件包,实现 js/css 文件体积非常明显压缩 (约 60%-80%);

  5. 移动端适配问题

    如何解决移动端适配的问题是衡量一个移动端用户体验的基础判断标准,框架采用淘 H5 页面的终端适配方案,
    文章详见 https://github.com/amfe/article/issues/17, 以基础 1rem=75px, 进行适配,对内置 css 样式均进行了适配优化;

  6. 内置 UI 框架

    6.1 admin 工程内置 iview 作为后台 UI 框架,蚂蚁金服的 AntV/G2 作为报表插件,这两者都提供了优雅的界面设计和丰富全面的文档说明

    iview 地址

    AntV 地址

    6.2 mobile 工程内置 Cube-UI 框架,同样的,你也可以使用 vux 框架作为移动端 UI 框架

    Cube-UI 地址

    VUX 地址

    6.3 PC 端内置 iview, iview 作为优秀的后台 UI 框架,在此仅作为内置示例,你可以选择自己喜欢的 UI 框架作为替换

    laravel 服务端渲染基于 spatie/laravel-server-side-rendering, 感谢!#

方案集成#

  • home 即前端用户可见页面,采用 laravel-vue 服务端渲染方案 SSR
  • admin 项目采用前后端分离架构 SPA
  • mobile 项目采用前后端分离架构 SPA

环境需求#

    1. php 环境

    确保你已经安装 composer

    Laravel 文档

    composer 安装教程

    1. nodejs 环境

    确保你已经安装 node, 推荐安装最新稳定版 node

    node 内置 npm , 已安装完成 node 即可,无需单独安装 npm

    node 官网

    安装完成,检查 node 版本 > 8.0

    node -v

    npm 版本 > 5.3

    npm -v

Install, 只需 2 步即可#

1. clone 代码,安装依赖#

  • 1.1 clone 或者下载项目代码,git clone

    git clone https://github.com/symenywong/laravel-vue-ssr-spa.git

    项目 clone 下来后执行如下操作,进入当前文件夹,例如,当前项目文件夹为 laravel-vue-ssr-spa

    cd laravel-vue-ssr-spa
  • 1.2 安装前端依赖

    npm install
  • 1.3 安装 composer 依赖
    composer install
  • 1.4 根目录手动修改.env 文件,添加如下配置
    NODE_PATH=/usr/local/bin/

2. 现在运行服务,检查是否正确启动#

  • 2.1 在项目目录执行,启动 php 服务,查看 http://localhost:8000/

    php artisan serve & npm run watch

    watch界面

    此时浏览器打开 http://localhost:8000/, 查看各工程界面

    注意:如果发现出现找不到 'index/js/entry-client.js', 那么先执行下 npm run build 构建一下文件

    dev界面

    admin界面

    mobile.png?raw=true
  • 2.3 buid 生产环境,在项目目录执行,启动 webpack 自动构建服务,生成 jss、css 以及对应的 gzip 压缩文件,

    由于开启 md5 文件名和 gzip 压缩,此处需要等待一段时间

    npm run build

    build界面

    全部准备工作已经完成,现在可以愉快的开始写代码了!


了解更多?请阅读以下内容#

项目目录

  |--app
  |  |--Http
  |  |   |--Controllers
  |--bootstrap
  |--config
  |--database
  |--config
  |--node_modules
  |--public
  |--resources                       // 资源文件
  |  |--assets                       // vue 模板渲染
  |  |   |--admin
  |  |   |--home
  |  |   |--mobile
  |  |--sass                        // sass style
  |  |   |--admin
  |  |   |--home
  |  |   |--mobile
  |  |--views                       // laravel 解析blade模板
  |  |   |--admin
  |  |   |--home
  |  |   |--mobile
  |--routes
  |--storage
  |--tests
  |--vendor
  |--resources
  |--md5File.js
  |--packaje.json
  |--webpack.config.js
  |--webpack.mix.js
  ...

npm script 命令 /package.json 说明#

  • 项目内置命令如下

    "scripts": {
      "dev": "npm run development",
      "build": "npm run production && npm run copy",
      "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=./webpack.config.js",
      "watch": "node ./md5File.js --env=dev && npm run development -- --watch",
      "watch-poll": "npm run watch -- --watch-poll",
      "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
      "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=./webpack.config.js",
      "ii": "npm install --registry https://registry.npm.taobao.org",
      "copy": "node ./md5File.js"
    },
  • npm run watch 启动 dev 开发环境,并启用动态热加载,sass 预处理等任务
  • npm run build 执行生产环境下的编译打包任务,执行完成后将生成 js 与 css 打包压缩文件
  • npm run ii 墙内用户执行 npm 安装失败,可选择此命令切换 taobao 镜像源安装

webpack 说明#

1. webpack.config.js 说明#

laravel-mix 本身内置 webpack 打包方案,但是存在如下问题需要解决

    1. 生产环境每次生成的 js/css 文件名称相同,会造成浏览器缓存,无法有效避免缓存造成的影响,因此采用 webpack 打包时,对文件名进行 md5 扩展,文件变动则随之生成新的 md5 文件名称
    1. js/css 静态资源请求,造成用户等待时间过长,如何压缩文件体积,减少资源请求,将会很大程度的提升用户体验,框架内置 compression-webpack-plugin 对生成的文件进行 gzip 压缩,同时生成 非压缩文件与压缩文件
      , 需要注意的是此方案需要服务端开启 gzip 请求配置
2. webpack.mix.js 说明#

框架内置 3 套工程方案

    1. PC 内置插件
    > iview
    > vue-router
    > vuex
    > axios
    1. admin 内置插件
    > iview
    > vue-router
    > vuex
    > axios
    1. mobile 内置插件
    > cube-ui
    > vue-router
    > vuex
    > axios
    //home
    mix.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')
    
    //admin
    mix.js('resources/assets/admin/app.js', 'public/admin/js')
    .sass('resources/sass/admin/app.scss', 'public/admin/css');
    
    //mobile
    mix.js('resources/assets/mobile/app.js', 'public/mobile/js')
    .sass('resources/sass/mobile/app.scss', 'public/mobile/css');

注意事项#

    1. SSR 工程无法使用 router-link 进行跳转: PC 端前端渲染工程 SSR 内置集成 vue-router 分发页面,但如果使用 进行跳转,使用的是 vue 单页跳转逻辑,与服务端渲染逻辑冲突,因此请避免使用 标签进行跳转,a 链接跳转则无此问题;

传送门#

NodeJs

Laravel

Vue

iview

spatie/laravel-server-side-rendering

Vue-Router

Vuex

axios

Cube UI

AntV 地址

本作品采用《CC 协议》,转载必须注明作者和本文链接
本帖由系统于 6年前 自动加精
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 8
qbhy

性能咋样

6年前 评论

@96qbhy

  1. SSR 性能取决于 laravel 的设计性能,只是通过 Controller 将数据通过 entry-client.js 返回至 vue 渲染,理论上,页面渲染仍然有 vue 接管,Laravel 服务端渲染不会消耗性能;
  2. SPA 渲染性能完全有 vue 接管,通过 api 交互;
  3. webpack 打包的性能只在开发阶段才会考虑,正式部署,无需考虑性能消耗,但是在 watch 阶段实时编译是会消耗内存,尤其在 build 阶段需要处理编译 /md5 文件名 / 压缩等,需要等待,等待时间取决于机器性能;
6年前 评论
qbhy

@symeny 恕我直言,性能肯定不忍直视。因为我之前也写过类似的方案。我写了两个方案,一个是用 node 来渲染 SPA 视图,然后 php 拿到后返回给客户端,这中间 php 调用 node 就要一大笔开销了。另一个方案是 php 的 v8js 扩展,这个还好一点,减少了一些开销,但是仍然不乐观。总结不论哪个方案,性能表现都不适合线上业务使用,这种同构方案做技术探索就可以了,线上还是该 SPA 就 SPA, 该 blade 就 blade,一定要服务端渲染 SPA 的话还是 用 nodejs 好,虽然性能也不是很好,但是也比 用 php + node 渲染 SPA 好点。
另外如果服务端渲染的目的是用来解决 SEO 问题的话,完全可以用 php 判断一下是不是爬虫来爬数据了 ,是的话返回对应的 html 文档,不是的话返回 SPA 页面,渲染就让前端浏览器自己完成,我个人觉得这个方案应该是比较折中的 SEO + SPA 解决方案了。

6年前 评论

@96qbhy
你应该是对其中的过程有些误解,build 生产环境全程未使用 nodejs, 只在 watch 开发阶段借助 node + webpack 进行编译 vue js 而已,实际生产环境中是 Laravel 控制器 将数据注入 html, 返回值视图 view, 在接收到页面后 js 将数据由 vue 渲染 dom , 并未有使用过 node 的任何过程

6年前 评论
qbhy

@symeny 给你点个赞,那么我请问

file
这个由 vuejs 渲染 dom,是指的在浏览器渲染码?不是浏览器的话?用什么东西来执行 vuejs 呢 ?

6年前 评论

@symeny 数据怎么渲染出来的?php 执行 js 应该是需要用到 v8js 吧,如果真的是使用 v8js 的话性能确实不怎么样

6年前 评论
qbhy

@yanthink 选择不多,v8js 和 node 或者 其他语言的 v8 引擎 (例如 go 的 v8),不论哪种性能都不高,体验反而会下降。

6年前 评论