摘要：提供服務端渲染單頁面渲染實現骨架同時集成打包構建文件名實現內置等套件提供端渲染方案前后端分離單頁面方案前后端分離單頁面方案等三種常見方案項目地址歡迎項目需求基于和提供的強大的功能組合并根據已有項目實踐經驗提供完整的集成方案幫助快速

提供服務端渲染/單頁面渲染實現骨架, 同時集成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作為報表插件, 這兩者都提供了優雅的界面設計和豐富全面的文檔說明

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

php 環境

確保你已經安裝composer

Laravel 文檔

composer 安裝教程

nodejs 環境

確保你已經安裝node,推薦安裝最新穩定版node

node 內置 npm , 已安裝完成 node 即可, 無需多帶帶安裝 npm

node 官網

安裝完成, 檢查node版本>8.0

node -v

npm 版本>5.3

npm -v

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.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
...

項目內置命令如下

"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 鏡像源安裝

laravel-mix本身內置 webpack 打包方案, 但是存在如下問題需要解決

生產環境每次生成的 js/css 文件名稱相同, 會造成瀏覽器緩存, 無法有效避免緩存造成的影響, 因此采用 webpack 打包時, 對文件名進行 md5 擴展, 文件變動則隨之生成新的 md5 文件名稱

js/css靜態資源請求,造成用戶等待時間過長, 如何壓縮文件體積, 減少資源請求, 將會很大程度的提升用戶體驗, 框架內置 compression-webpack-plugin 對生成的文件進行 gzip 壓縮, 同時生成 非壓縮文件與壓縮文件

,需要注意的是此方案需要服務端開啟 gzip 請求配置

框架內置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分發頁面, 但如果使用 進行跳轉, 使用的是 vue 單頁跳轉邏輯, 與服務端渲染邏輯沖突, 因此請避免使用 標簽進行跳轉, a 鏈接跳轉則無此問題;

NodeJs

Laravel

Vue

iview

spatie/laravel-server-side-rendering

Vue-Router

Vuex

axios

Cube UI

AntV地址