?

通過(guò) node 創(chuàng)建 web 服務(wù)器。

開啟 gzip 配置。

配置 https 服務(wù)。

使用 pm2 管理應(yīng)用。

通過(guò) node 創(chuàng)建 web 服務(wù)器

創(chuàng)建?node?項(xiàng)目，并安裝?express，通過(guò)?express?快速創(chuàng)建?web?服務(wù)器，將?vue?打包生成的?dist?文件夾，托管為靜態(tài)資源即可，關(guān)鍵代碼如下：

Javascript

const express = require('express') // 創(chuàng)建 web 服務(wù)器 const app = express()// 托管靜態(tài)資源 app.use(express.static('./dist'))// 啟動(dòng) web 服務(wù)器 app.listen(80, () => { console.log('web server running at http://127.0.0.1') })

第一步，先創(chuàng)建一個(gè)文件夾，這里命名為?vue_shop_server，然后通過(guò)?Code?打開。
新建一個(gè)終端，輸入?npm init -y?執(zhí)行，初始化包管理配置文件。

初始化完成后，執(zhí)行?npm install express -S?安裝?express

接下來(lái)，將我們?vue?項(xiàng)目通過(guò)?build?打包得到的?dist?文件夾復(fù)制一份，粘貼到我們的?vue_shop_server文件夾內(nèi)，然后再新建一個(gè)?app.js?入口文件，結(jié)構(gòu)圖如下圖所示。

測(cè)試服務(wù)器是否能夠運(yùn)行，新建終端，執(zhí)行?node .\app.js?命令。如果發(fā)現(xiàn)輸出了?web server running at http://127.0.0.1?則表示服務(wù)已經(jīng)啟動(dòng)了。

開啟 gzip 配置

配置完之前服務(wù)之后，我們打開網(wǎng)站后，發(fā)現(xiàn)請(qǐng)求網(wǎng)絡(luò)中文件體積依舊是很大，如下圖所示。

使用?gzip?可以減小文件體積，使傳輸速度更快。

可以通過(guò)服務(wù)器端使用?Express?做?gzip?壓縮。其配置如下：

Javascript

// 安裝相應(yīng)包 npm install compression -S // 導(dǎo)入包 const compression = require('compression'); // 啟用中間件 app.use(compression());

此時(shí)的?app.js?文件代碼如下所示，注意，一定要把啟用中間件放在托管靜態(tài)資源之前！?不然?gzip?壓縮不會(huì)生效。

Javascript

const express = require('express') // 導(dǎo)入包 const compression = require('compression'); // 創(chuàng)建 web 服務(wù)器 const app = express() // 啟用中間件 app.use(compression()); // 托管靜態(tài)資源 app.use(express.static('./dist'))// 啟動(dòng) web 服務(wù)器 app.listen(80, () => {console.log('web server running at http://127.0.0.1') })

總結(jié)

以上是生活随笔為你收集整理的前端学习（2743）：重读vue电商网站53之项目上线的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。