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

最新推荐文章于 2024-05-26 15:08:09 发布
最新推荐文章于 2024-05-26 15:08:09 发布
阅读量325 收藏
点赞数
文章标签： webpack php javascript ViewUI
原文链接：https://segmentfault.com/a/1190000017022301
版权

Laravel-Vue-SSR-SPA

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

项目地址, 欢迎star

github https://github.com/symenywong...

项目需求

基于 Laravel 和 Vue 提供的强大的功能组合, 并根据已有项目实践经验, 提供完整的 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 文件命名方案, 可以有效的避免静态文件缓存造成的问题;

  1. gzip 文件压缩

    在前端优化的方案里, 开启服务端 gzip压缩是一种非常好的减少资源请求的方案;

同样的, 在 webpack 里使用 compression-webpack-plugin 输出 gzip 文件包, 实现 js/css 文件体积非常明显压缩(约60%-80%);

  1. 移动端适配问题

    如何解决移动端适配的问题是衡量一个移动端用户体验的基础判断标准,框架采用淘H5页面的终端适配方案,

文章详见https://github.com/amfe/article/issues/17, 以基础 1rem=75px,进行适配, 对内置css 样式均进行了适配优化;

  1. 内置 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/, 查看各工程界面

dev界面

admin界面

mobile.png?raw=true

  • 2.2 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 文件名称
  2. js/css静态资源请求,造成用户等待时间过长, 如何压缩文件体积, 减少资源请求, 将会很大程度的提升用户体验, 框架内置 compression-webpack-plugin 对生成的文件进行 gzip 压缩, 同时生成 非压缩文件与压缩文件

,需要注意的是此方案需要服务端开启 gzip 请求配置

2. webpack.mix.js 说明

框架内置3套工程方案

  1. PC 内置插件

    > iview
> vue-router
> vuex
> axios

  2. admin 内置插件

    > iview
> vue-router
> vuex
> axios

  3. 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分发页面, 但如果使用 <router-link/> 进行跳转, 使用的是 vue 单页跳转逻辑, 与服务端渲染逻辑冲突, 因此请避免使用 <router-link/>标签进行跳转, a 链接跳转则无此问题;

传送门

NodeJs

Laravel

Vue

iview

spatie/laravel-server-side-rendering

Vue-Router

Vuex

axios

Cube UI

AntV地址

weixin_33961829
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
laravel-spa:引导Laravel应用程序时要考虑单页应用程序（SPA）
05-24
git clone ：Verron / laravel-spa.git 设置.env（数据库连接） 作曲家安装 PHP的工匠迁移 设置用户（以下示例可以在修补程序中调用） \ App \ User :: create ([ 'email' => '[email protected]' , 'password' => bcrypt ( 'setup' ), 'name' => 'Setup User' ]); php artisan护照：安装 npm安装 npm run dev PHP工匠服务 变更记录 2020-12-20 更新到Laravel 8 更新到Vue 3 更新到Vuex 4 更新到VueRouter 4 从使用自定义身份验证控制器切换到Laravel Sanctum / Fortify 从Bootstrap切换到Tailwind CSS
使用Laravel & Vue的高级服务器端渲染:多页应用程序
爱前端网
12-16 606
关于Laravel的新的Vue服务器端渲染功能的教程。该教程主要集中在Laravel环境中设置SSR，所以我只有时间来演示一个简单的“Hello World”应用程序，没有显着的功能。 现在我想要构建上一个教程，并演示如何使用Vue Router呈现包含多个页面的Vue应用程序，因为大多数Laravel项目都有多个页面。 安装 本教程将扩展在前一篇文章中使用Laravel＆Vue.js...
使用Laravel和Vue.js2.5进行服务器端渲染
07-27 360
服务器端渲染是一种很好的方式，可以增加你的全栈应用程序中加载速度的感知。用户在加载你的站点时可以得到一个完整的页面，而不是在Java运行之前没有填充的空白页面。 使用Laravel作为Vue.js后端的一个缺点是无法由Vue.js 2.5.0的发布为非Node.js环境（包括PHP，Python，Ruby等）带来了服务器端的渲染支持。 在本教程中，我将带您了解Laravel的设置步骤，并演示一个简单的服务器渲染应用程序。并且你可以在Github上获取该项目代码（https://github.com/..
Laravel5.7引入vue做spa单页面的应用
weixin_38923504的博客
01-13 694
1，安装 laravel composer create-project --prefer-dist laravel/laravel laravel-spa 2, 安装前端依赖包 npm install 3,安装完之后，为了便于开发，使用热更新模式,在 webpack.mix.js 中添加配置 mix.browserSync({ proxy: ‘localhost:8000’ }); 4, 先执...
使用laravel构建spa
weixin_33748818的博客
01-23 186
为什么80%的码农都做不了架构师？>>> ...
laravel-vue:laravel-vue 代码生成器 vue 模板
05-01
laravel-vue laravel-vue 代码生成器 vue 模板
laravel-vue-spa：Laravel-Vue SPA入门套件
02-03
Laravel-Vue SPA Laravel-Vue SPA入门套件。产品特点Laravel 8 Vue + Vue...-prefer-dist cretueusebiu/laravel-vue-spa 编辑.env并设置数据库连接详细信息（通过git clone或下载进行安装时，运行php artisan key:ge
laravel-mix-vue3:适用于Vue 3，Typescript和JSX的Laravel Mix扩展
05-28
npm install laravel-mix-vue3 --save-dev//oryarn add laravel-mix-vue3 -D 如果Laravel Mix无法安装以下内容，请确保安装以下内容 npm install @types/webpack-env @vue/compiler-sfc vue-loader@next laravel-...
laravel-vue-admin：开箱即用的Laravel后台扩展，前分离，纵向控制前端组件，无需编写vue即可创建一个vue + vuex + vue-route + elment-ui + laravel的项目，丰富的表单表格组件，强大的自定义组件功能
02-03
Laravel-Vue-Admin是一个开箱即用的Laravel后台扩展 vue + vuex + vue-route + elment-ui + laravel的项目 内置了丰富的表单表格组件 最核心的是强大的自定义组件功能 ...composer show smallruraldog/laravel-vue-a
laravel-vue-admin:Laravel + Vue实现前阶段分离的后台管理系统https
03-11
laravel-vue-admin是一套基于Vue全家桶（Vue2.x + Vue-router2.x + Vuex）+ Laravel的前分离框架。后台所需要的功能模块 前一级分离设计，前端代码在admin目录，除以前后台页面；细分代码在laravel目录下， 主要技术...
基于Vuejs开发的LaravelSPA项目
08-10
基于 Vuejs 开发的 Laravel SPA 项目
Laravel + Vue 3（Vite、TypeScript）SPA 设置
热门推荐
努力是为了站在万人之中，成为别人的光
01-10 1万+
在本教程中，我将向大家展示如何使用 Laravel + Vue 3 使用 typescript 和 Vite 设置你自己的单页应用程序。这是在 Laravel 项目中添加 PWA 的手动方法。我们不会使用 InertiaJS 或其他类似的东西，我们也不会混合使用。我们将手动实现我们自己的 VueJS 前端。 第 2 步：设置前端 在我们的 laravel 项目中，让我们使用 yarn 运行一个命令，并选择 vue 和 typescript。 将项目名称设置为：FrontEndApp 选择：Vue 选择：Ty
Laravel Vue 开发 SPA 应用
weixin_34297704的博客
03-10 379
2019独角兽企业重金招聘Python工程师标准>>> ...
利用Laravel Sanctum针对SPA和简单API的轻量级身份验证系统。
qq_41688060的博客
04-23 3664
利用Laravel Sanctum针对SPA和简单API的轻量级身份验证系统。 安装 Laravel Sanctum 首先使用 Composer 安装该软件包 composer require laravel/sanctum 接下来运行以下命令发布迁移文件（并运行迁移）： php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider" php artisan migrate Sanctum 安装的最后一部分要求
webpack5生产模式
zhaoshy_fighting的博客
05-22 403
开发模式和生产模式有不同的 配置文件2修改webpack.prod.js文件修改webpack.dev.js文件修改webpack.dev.js文件1》修改输出路径为undefined2》将绝对路径进行修改，进行回退此时文件的执行命令为修改webpack.prod.js文件1》修改绝对路径的部分，进行回退2》打开clean:true 使每一次打包文件都会将之前打包的文件进行清空3》删除devserver部分4》更改模式为 production执行命令。
mac电脑用n切换node版本
qq_43631129的博客
05-23 152
mac电脑用n切换node版本。
Webpack Bundle Analyzer：深入分析与优化你的包
天涯学馆
05-22 470
Webpack Bundle Analyzer是一个用于可视化的工具，它可以帮助你分析Webpack打包后的输出文件，查看哪些模块占用了最多的空间，从而进行优化。这将在dist目录下生成一个文件，打开这个文件，你将看到一个交互式的图表，显示了你的包的大小分布。
前端开发工程师——webpack
最新发布
[ 「今でもあなたは私の光。」❤️如今你依旧是我的光。
05-26 249
打包命令直接运行就行。
webpack打包配置项
weixin_43617604的博客
05-22 169
【代码】webpack打包配置项。
vue预渲染vue-cli-plugin-prerender-spa
08-21
- *1* [vue-cli单页面预渲染seo-prerender-spa-plugin操作](https://download.csdn.net/download/weixin_38627234/12924216)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值