?

通過 node 創建 web 服務器。

開啟 gzip 配置。

配置 https 服務。

使用 pm2 管理應用。

通過 node 創建 web 服務器

創建?node?項目，并安裝?express，通過?express?快速創建?web?服務器，將?vue?打包生成的?dist?文件夾，托管為靜態資源即可，關鍵代碼如下：

Javascript

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

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

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

接下來，將我們?vue?項目通過?build?打包得到的?dist?文件夾復制一份，粘貼到我們的?vue_shop_server文件夾內，然后再新建一個?app.js?入口文件，結構圖如下圖所示。

測試服務器是否能夠運行，新建終端，執行?node .\app.js?命令。如果發現輸出了?web server running at http://127.0.0.1?則表示服務已經啟動了。

開啟 gzip 配置

配置完之前服務之后，我們打開網站后，發現請求網絡中文件體積依舊是很大，如下圖所示。

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

可以通過服務器端使用?Express?做?gzip?壓縮。其配置如下：

Javascript

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

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

Javascript

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。