vue打包命令
npm run build
- 產生一個dist文件，里面會有所有項目編譯好的內容，還有一個.map文件, 這個是幫助你維護用的 你也可以選擇修改一下配置，不生成 > 可以減少編譯后的體積。
- 創建
vue.config.js- 代碼如下
module.exports = {
productionSourceMap: false, // 在你npm run build 不輸出, .map文件
}
詳細可以去看 vue的說明配置: 參見文章: https://juejin.cn/post/6886698055685373965
搭建前端服務器
- 現在可以拿到一個dist目錄， 現在需要去進行服務器搭建， 因為我解決history是在服務端搞定的，所以我直接分享我的方法。
- 創建一個vue-server目錄(文件夾)
- 然后生成配置文件執行:
這里說明一下一般情況寫我們提交git是不會吧node_modules目錄放上去的，就是因為有這個package.json文件，你從git倉庫clone下來之后的第一件事情會去執行npm install， 他會直接去讀取package.json中的文件，然后將所有依賴的包都安裝下來。
npm init -y
安裝express框架
> npm i express --save
上方命令會按照到生產環境中的依賴 "dependencies": {}
安裝壓縮中間件
> npm i compression --save
安裝connect-history-api-fallback中間件
> npm i connect-history-api-fallback --save
創建app.js文件和public目錄
> 目錄結構
vue-server
public
- dist
- css
- image
- js
- favicon.cio
- index.html
app.js
app.js內容
const express = require('express');
const compression = require('compression');
const app = express();
// 解決history的路由模式無法正常訪問的中間件
const history = require("connect-history-api-fallback");
// 可以自定義端口
const port = 8081;
// gzip壓縮中間件
app.use(compression())
app.use(
history({
// 你可以任意修改路徑， 但需要保證這個路徑下有這個文件;
index: "/dist/index.html",
})
);
app.use(express.static("./public")).listen(port);
- 當然
connect-history-api-fallback中間件中也會有很多配置， 有興趣可以去看看:
https://www.npmjs.com/package/connect-history-api-fallback
對了你可以在本地運行一下測試一下，如何可以的話在進行壓縮。
運行nodejs
- 找到項目目錄， 也就是
vue-server目錄， 然后上方輸入框內獲取焦點， 然后輸入cmd， windows 7 可以按shift+右鍵 - 輸入命令
node app.js
壓縮vue-server目錄
后續的文章我會去分享如何在我們服務器上中去安裝 nodejs(我的服務器是CentOS7.6) 以及如何把剛剛壓縮的文件上傳到服務器、並進行部署。以及一些安全問題比如說: DDoS攻擊以及解決方案