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 集成項目,主要解決如下問題
- SSR服務端渲染
Laravel-vue 服務端渲染, 即 Laravel SSR 方案, 利於搜索引擎的 SEO 搜索抓取;
- SPA前後端分離
Laravel-vue SPA框架, 即前後端分離下的單頁面路由方案, 前後端通過 api 實現交互, 可以提供更加靈活的開發選擇以及更高的開發效率, 同時潛在的一個優勢是 app 可以與移動端h5共用同一套 api 體系,極大節省後期業務開發的重複工作;
- 靜態資源緩存
熟悉前端開發的同學一定碰到過需要解決瀏覽器緩存靜態資源造成的問題, 比如 js/css 等;
在 weback 的幫助下, 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 admin工程內置 iview 作爲後臺UI框架, 螞蟻金服的AntV/G2作爲報表插件, 這兩者都提供了優雅的界面設計和豐富全面的文檔說明
6.2 mobile工程內置Cube-UI框架, 同樣的, 你也可以使用 vux 框架作爲移動端 UI框架
6.3 PC 端內置iview, iview 作爲優秀的後臺 UI 框架, 在此僅作爲內置示例, 你可以選擇自己喜歡的 UI 框架作爲替換
laravel服務端渲染基於spatie/laravel-server-side-rendering, 感謝!
方案集成
- home 即前端用戶可見頁面, 採用 laravel-vue 服務端渲染方案 SSR
- admin 項目採用前後端分離架構 SPA
- mobile 項目採用前後端分離架構 SPA
環境需求
-
- php 環境
確保你已經安裝composer
-
- nodejs 環境
確保你已經安裝node,推薦安裝最新穩定版node
node 內置 npm , 已安裝完成 node 即可, 無需單獨安裝 npm
安裝完成, 檢查node版本>8.0
node -vnpm 版本>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 install1.3 安裝composer 依賴
composer install1.4 根目錄手動修改.env 文件, 添加如下配置
NODE_PATH=/usr/local/bin/2. 現在運行服務,檢查是否正確啓動
-
2.1 在項目目錄執行, 啓動 php 服務, 查看
http://localhost:8000/php artisan serve & npm run watch
此時瀏覽器打開 http://localhost:8000/, 查看各工程界面
-
2.2 buid 生產環境, 在項目目錄執行, 啓動 webpack 自動構建服務, 生成 jss、css以及對應的 gzip 壓縮文件,
由於開啓 md5文件名和 gzip 壓縮, 此處需要等待一段時間
npm run 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 打包方案, 但是存在如下問題需要解決
- 生產環境每次生成的 js/css 文件名稱相同, 會造成瀏覽器緩存, 無法有效避免緩存造成的影響, 因此採用 webpack 打包時, 對文件名進行 md5 擴展, 文件變動則隨之生成新的 md5 文件名稱
- js/css靜態資源請求,造成用戶等待時間過長, 如何壓縮文件體積, 減少資源請求, 將會很大程度的提升用戶體驗, 框架內置 compression-webpack-plugin 對生成的文件進行 gzip 壓縮, 同時生成 非壓縮文件與壓縮文件
,需要注意的是此方案需要服務端開啓 gzip 請求配置
2. webpack.mix.js 說明
框架內置3套工程方案
-
PC 內置插件
> iview > vue-router > vuex > axios -
admin 內置插件
> iview > vue-router > vuex > axios -
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');注意事項
- SSR工程無法使用 router-link 進行跳轉: PC 端前端渲染工程 SSR 內置集成 vue-router分發頁面, 但如果使用 <router-link/> 進行跳轉, 使用的是 vue 單頁跳轉邏輯, 與服務端渲染邏輯衝突, 因此請避免使用 <router-link/>標籤進行跳轉, a 鏈接跳轉則無此問題;