Laravel-Vue-SSR-SPA 服務端渲染/單頁面渲染實現骨架

時間  2020-01-11
標籤 laravel vue ssr spa 服務 渲染 頁面 實現 骨架 简体版
原文   原文鏈接

Laravel-Vue-SSR-SPA

提供服務端渲染/單頁面渲染實現骨架, 同時集成webpack打包構建 MD5文件名/gzip 實現, 內置 vue-router,vuex, axios等 vue 套件, 提供 PC端 SSR 渲染方案, Admin 先後端分離單頁面方案, Mobile 先後端分離單頁面方案等三種常見方案;php

項目地址, 歡迎starcss

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

項目需求

基於 Laravel 和 Vue 提供的強大的功能組合, 並根據已有項目實踐經驗, 提供完整的 laravel-vue 集成方案, 幫助快速搭建 Laravel-vue 集成項目,主要解決以下問題html

  1. SSR服務端渲染

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

  2. SPA先後端分離

    Laravel-vue SPA框架, 即先後端分離下的單頁面路由方案, 先後端經過 api 實現交互, 能夠提供更加靈活的開發選擇以及更高的開發效率, 同時潛在的一個優點是 app 能夠與移動端h5共用同一套 api 體系,極大節省後期業務開發的重複工做;vue

  3. 靜態資源緩存

    熟悉前端開發的同窗必定碰到過須要解決瀏覽器緩存靜態資源形成的問題, 好比 js/css 等;node

在 weback 的幫助下, js的編譯提供 md5 文件命名方案, 能夠有效的避免靜態文件緩存形成的問題;webpack

  1. gzip 文件壓縮

    在前端優化的方案裏, 開啓服務端 gzip壓縮是一種很是好的減小資源請求的方案;ios

一樣的, 在 webpack 裏使用 compression-webpack-plugin 輸出 gzip 文件包, 實現 js/css 文件體積很是明顯壓縮(約60%-80%);laravel

  1. 移動端適配問題

    如何解決移動端適配的問題是衡量一個移動端用戶體驗的基礎判斷標準,框架採用淘H5頁面的終端適配方案,git

文章詳見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地址

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程