摘要：提供服務(wù)端渲染單頁面渲染實(shí)現(xiàn)骨架同時集成打包構(gòu)建文件名實(shí)現(xiàn)內(nèi)置等套件提供端渲染方案前后端分離單頁面方案前后端分離單頁面方案等三種常見方案項(xiàng)目地址歡迎項(xiàng)目需求基于和提供的強(qiáng)大的功能組合并根據(jù)已有項(xiàng)目實(shí)踐經(jīng)驗(yàn)提供完整的集成方案幫助快速

提供服務(wù)端渲染/單頁面渲染實(shí)現(xiàn)骨架, 同時集成webpack打包構(gòu)建 MD5文件名/gzip 實(shí)現(xiàn), 內(nèi)置 vue-router,vuex, axios等 vue 套件, 提供 PC端 SSR 渲染方案, Admin 前后端分離單頁面方案, Mobile 前后端分離單頁面方案等三種常見方案;

項(xiàng)目地址, 歡迎star

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

基于 Laravel 和 Vue 提供的強(qiáng)大的功能組合, 并根據(jù)已有項(xiàng)目實(shí)踐經(jīng)驗(yàn), 提供完整的 laravel-vue 集成方案, 幫助快速搭建 Laravel-vue 集成項(xiàng)目,主要解決如下問題

SSR服務(wù)端渲染

Laravel-vue 服務(wù)端渲染, 即 Laravel SSR 方案, 利于搜索引擎的 SEO 搜索抓取;

SPA前后端分離

Laravel-vue SPA框架, 即前后端分離下的單頁面路由方案, 前后端通過 api 實(shí)現(xiàn)交互, 可以提供更加靈活的開發(fā)選擇以及更高的開發(fā)效率, 同時潛在的一個優(yōu)勢是 app 可以與移動端h5共用同一套 api 體系,極大節(jié)省后期業(yè)務(wù)開發(fā)的重復(fù)工作;

靜態(tài)資源緩存

熟悉前端開發(fā)的同學(xué)一定碰到過需要解決瀏覽器緩存靜態(tài)資源造成的問題, 比如 js/css 等;

在 weback 的幫助下, js的編譯提供 md5 文件命名方案, 可以有效的避免靜態(tài)文件緩存造成的問題;

gzip 文件壓縮

在前端優(yōu)化的方案里, 開啟服務(wù)端 gzip壓縮是一種非常好的減少資源請求的方案;

同樣的, 在 webpack 里使用 compression-webpack-plugin 輸出 gzip 文件包, 實(shí)現(xiàn) js/css 文件體積非常明顯壓縮(約60%-80%);

移動端適配問題

如何解決移動端適配的問題是衡量一個移動端用戶體驗(yàn)的基礎(chǔ)判斷標(biāo)準(zhǔn),框架采用淘H5頁面的終端適配方案,

文章詳見https://github.com/amfe/article/issues/17, 以基礎(chǔ) 1rem=75px,進(jìn)行適配, 對內(nèi)置css 樣式均進(jìn)行了適配優(yōu)化;

內(nèi)置 UI 框架

6.1 admin工程內(nèi)置 iview 作為后臺UI框架, 螞蟻金服的AntV/G2作為報表插件, 這兩者都提供了優(yōu)雅的界面設(shè)計(jì)和豐富全面的文檔說明

iview地址

AntV地址

6.2 mobile工程內(nèi)置Cube-UI框架, 同樣的, 你也可以使用 vux 框架作為移動端 UI框架

Cube-UI地址

VUX地址

6.3 PC 端內(nèi)置iview, iview 作為優(yōu)秀的后臺 UI 框架, 在此僅作為內(nèi)置示例, 你可以選擇自己喜歡的 UI 框架作為替換

laravel服務(wù)端渲染基于spatie/laravel-server-side-rendering, 感謝!

home 即前端用戶可見頁面, 采用 laravel-vue 服務(wù)端渲染方案 SSR

admin 項(xiàng)目采用前后端分離架構(gòu) SPA

mobile 項(xiàng)目采用前后端分離架構(gòu) SPA

php 環(huán)境

確保你已經(jīng)安裝composer

Laravel 文檔

composer 安裝教程

nodejs 環(huán)境

確保你已經(jīng)安裝node,推薦安裝最新穩(wěn)定版node

node 內(nèi)置 npm , 已安裝完成 node 即可, 無需多帶帶安裝 npm

node 官網(wǎng)

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

node -v

npm 版本>5.3

npm -v

1.1 clone或者下載項(xiàng)目代碼, git clone

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

項(xiàng)目 clone 下來后執(zhí)行如下操作, 進(jìn)入當(dāng)前文件夾, 例如, 當(dāng)前項(xiàng)目文件夾為 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 在項(xiàng)目目錄執(zhí)行, 啟動 php 服務(wù), 查看 http://localhost:8000/

php artisan serve & npm run watch

此時瀏覽器打開 http://localhost:8000/, 查看各工程界面

2.2 buid 生產(chǎn)環(huán)境, 在項(xiàng)目目錄執(zhí)行, 啟動 webpack 自動構(gòu)建服務(wù), 生成 jss、css以及對應(yīng)的 gzip 壓縮文件,

由于開啟 md5文件名和 gzip 壓縮, 此處需要等待一段時間

npm run build

全部準(zhǔn)備工作已經(jīng)完成, 現(xiàn)在可以愉快的開始寫代碼了!

項(xiàng)目目錄

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

項(xiàng)目內(nèi)置命令如下

"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開發(fā)環(huán)境, 并啟用動態(tài)熱加載, sass 預(yù)處理等任務(wù)

npm run build 執(zhí)行生產(chǎn)環(huán)境下的編譯打包任務(wù), 執(zhí)行完成后將生成 js與css 打包壓縮文件

npm run ii 墻內(nèi)用戶執(zhí)行npm 安裝失敗, 可選擇此命令切換taobao 鏡像源安裝

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

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

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

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

框架內(nèi)置3套工程方案

PC 內(nèi)置插件

> iview
> vue-router
> vuex
> axios

admin 內(nèi)置插件

> iview
> vue-router
> vuex
> axios

mobile 內(nèi)置插件

> 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 進(jìn)行跳轉(zhuǎn): PC 端前端渲染工程 SSR 內(nèi)置集成 vue-router分發(fā)頁面, 但如果使用 進(jìn)行跳轉(zhuǎn), 使用的是 vue 單頁跳轉(zhuǎn)邏輯, 與服務(wù)端渲染邏輯沖突, 因此請避免使用 標(biāo)簽進(jìn)行跳轉(zhuǎn), a 鏈接跳轉(zhuǎn)則無此問題;

NodeJs

Laravel

Vue

iview

spatie/laravel-server-side-rendering

Vue-Router

Vuex

axios

Cube UI

AntV地址