如何使用Nginx來部署我們打包好的前端Vue項目
Nginx 環(huán)境搭建
因為這里做的演示是本地服務(wù)博投，就需要安裝在自己的電腦上
Mac系統(tǒng)下的nginx的安裝及使用
1.確認你的電腦是否安裝homebrew蝇摸，打開電腦終端輸入：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2.確認homebrew是否安裝成功籍凝，輸入
brew -v
3.安裝nginx
brew install nginx
4.確認nginx是否安裝成功
nginx -v
5.熟悉 nginx目錄：
- nginx 安裝目錄
/usr/local/Celler/nginx/1.21.1
- nginx配置文件目錄
/usr/local/etc/nginx
- config文件目錄
/usr/local/ect/nginx/nginx/nginx.conf
6.進入bin目錄
cd /usr/local/Celler/nginx/1.21.1/bin
輸入巡李，啟動
sudo ngnix
驗證是否啟動成功
http://localhost
如果出現(xiàn)下圖葛峻，證明nginx已經(jīng)啟動成功
如果在啟動過程中出現(xiàn)
nginx: [emerg] bind() to 0.0.0.0:80 failed (48: Address already in use)
該問題是由于8080端口被占用薄辅，解決
- 查看占用8080端口應(yīng)用：
ps -ef | grep nginx
- 殺死進程
kill -9 xxx
- 停止要拂、然后重啟
sudo nginx -s stop
sudo nginx
7. 前端項目打包
首先需要先在打包之前在 Vue 的配置文件里去修改公共路徑的配置
同時在項目的 router 目錄下 index.js 為 Vue 項目指定路由基本路徑為 /
8.打包前端項目,打包成 dist 目錄
npm run build:prod
9.Nginx 部署項目
將打包好的前端項目放到 Nginx 的 html 目錄下去
然后將 dist文件 拖到 html 中就可以了
修改 Nginx 配置文件
修改一下 Nginx 的配置文件 nginx.conf
配置改動：
(1）端口號為 8088
(2) 服務(wù)名稱為 localhost
(3)root目錄為 html/dist
(4)location地址為 /
處理前臺路由 history 模式刷新 404 的問題
8.啟動 Nginx 訪問項目
配置修改好之后，我們就可以使用 Nginx 的命令來啟動 Nginx 服務(wù)
cd /usr/local/Cellar/nginx/1.12.1/bin/
nginx -s reload
如果沒有任何提示站楚，就說明 Nginx 服務(wù)重新加載配置成功了
瀏覽器地址欄里訪問 http://localhost:8088了
windows下nginx的安裝及使用
1.安裝nginx(window) http://nginx.org/en/download.html
解壓即可
2.準(zhǔn)備打包好的vue項目(dist) 這里dist文件目錄在D:\nginx-1.21.1\html\dist
3.在nginx安裝目錄中找到D:\nginx-1.21.1\conf）進行修改
vue history模式下nginx
補充
常用的指令有：
nginx -t 試配置是否有語法錯誤
nginx -s reload 重新加載配置
nginx -s reopen 重啟
nginx -s stop 停止
nginx -s quit 退出
nginx -V 查看版本，以及配置文件地址
nginx -v 查看版本
nginx -c filename 指定配置文件
nginx -h 幫助
