一.前言
? ? ? ? 本文是在windows環境(Linux環境下其實也大同小異)下基于Nginx實現搭建本地服務器,手把手教你部署vue項目。
?二.Nginx入門
? ? ? ? 1)下載安裝
? ? ? ? 進入Nginx官網下載,選擇stable版本下的windows版本下載即可
? ? ? ? ?2)下載完成解壓,可以看到如下文件夾
? ? ? ? ?3)啟動服務
在路徑欄輸入cmd進入命令提示符窗口
?輸入命令start nginx 即可啟動nginx服務
?4)效果
啟動完成后,在瀏覽器訪問 localhost:80 如果看到如下頁面,則表示nginx服務啟動成功(注意要保持命令提示符窗口是開著的)
?5) Nginx常用命令
start nginx #啟動nginx服務nginx -s stop #停止nginx服務nginx -s reload #重啟nginx服務,一般修改配置文件后執行該命令
這里只是帶大家入個門,至于其他更深層次的內容就需要大家自己學習了(配置文件在下面有介紹),入過大家啟動遇到各種問題可以自行百度解決,一般都是小問題。
三.部署vue項目
1)vue項目打包
在終端輸入一下命令,進行vue項目打包
npm run build
打包完成后會出現一個dist文件夾,可在文件里查看,右鍵選擇在文件資源管理器中顯示
?打包好的項目結構是這樣的
可以將其全部復制,然后粘貼到nginx的html文件夾下(html文件夾下的內容要刪除)也可以在html文件夾下新建一個文件存起來(我的做法是存起來,放在originaryHtml文件夾下了)
?此時刷新剛才的網頁應該就可以顯示自己寫的項目了(我的很丑請不要介意),如果顯示404,可以重新輸入網址
?但是僅僅是這樣的話會有一個很嚴重的問題,無法通過路由訪問,這個問題可以通過修改配置文件來解決
2)修改配置文件
打開nginx文件夾下的conf文件下的nginx.conf文件(可以用vscode查看)
?找到這段代碼
?將location 下的代碼修改為如下代碼
location / {root html; # 網站的靜態資源目錄,css,js,image文件等index index.html; # 網站首頁try_files $uri $uri/ /index.html;# 配置vue路由映射#假如你訪問 localhost:80/banner 該選項會幫你在index.html里查找banner路由}
保存并在命令提示符窗口執行重啟命令(修改配置文件后要重啟才會生效)
此時便可通過路由訪問項目。如果你想自己定義路由和端口,請參考如下配置
server {listen 8081;//自己配置的監聽端口,注意不要和已有的端口沖突,域名也是一樣的server_name my.cn;//自己配置的域名location / {root html; # 網站的靜態資源目錄,css,js,image文件等index index.html; # 網站首頁try_files $uri $uri/ /index.html;#配置路由映射,不配置這個不能通過路由訪問網站😥}}
#這里作一個說明,在配置文件里可以有多個server配置,并排寫下去就好了,你要是怕弄混,可以在最后一個大括號里開始寫你自己的配置
配置完成重啟nginx服務后,我就可以通過my.cn:8081來訪問我自己的項目了