vue 開發以及部署項目指南

項目開發過程中需要安裝的插件
http請求axios插件:axios
路由懶加載插件開發依賴:@babel/plugin-syntax-dynamic-import
圖表插件:echarts
樹形表格插件:vue-table-with-tree-grid
進度條插件:nprogress
富文本編輯器:vue-quill-editor
複製對象插件:lodash
前端框架:element-ui

打包命令行:npm run build
1、vue項目打包安裝插件(發佈時去除控制檯打印代碼:如:console.log()):babel-plugin-transform-remove-console

項目上線步驟(需要新建一個空文件夾,然後按照下面五點依次執行):
1、npm init -y
2、npm iexpress -S
3、新建 app.js 文件,添加如下代碼
     const express =require('express')
     const app = express()

     app.use(express.static('./dist'))
     
     app.listen(80, () => {
         console.log('server running at http://127.0.0.1')
     })

4、cls 清空控制檯
5、node app.js 如果控制檯打印出 "server running at http://127.0.0.1" 說明服務器運行成功

項目上線開啓 gzip 配置
1、安裝相應包 npm install compression -S
2、導入包 const compression = require('compression')
3、啓用中間件 app.use(compression());  // 一定要把這一行代碼,寫到 靜態資源 app.use(express.static('./dist')) 託管之前 

配置 HTTPS 服務
1、申請 SSL 證書 (https://freessl.org  https://freessl.cn)
① 進入 https://freessl.org/ 官網,輸入要申請的域名並選擇品牌。
② 輸入自己的郵箱並選擇相關選項。
③ 驗證 DNS (在域名管理後臺添加TXT記錄)
④ 驗證通過之後,下載SSL證書(full_chain.pem 公鑰;private.key 私鑰)。建議選用 多域名通配符

2、在後臺項目中導入證書
const https = require('https')
const fs = require('fs')
const options = {
       cert:  fs.readFileSync('./full_chain.pem'),
       key: fs.readFileSync('./private.key')
}
// https 固定端口 443
https.createServer(options, app).listen(443)

使用 pm2 管理應用 cmd命令安裝
1、在服務器中安裝pm2:npm i pm2 -g
2、啓動項目:pm2 start 腳本 --name 自定義名稱 (例如完整寫法:pm2 start app.js --name web_server)
3、查看運行項目:pm2 ls
4、重啓項目:pm2 restart 自定義名稱
5、停止項目:pm2 stop 自定義名稱
6、刪除項目:pm2 delete 自定義名稱

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章