快捷導(dǎo)航

Windows系統(tǒng)下使用nginx部署vue2項(xiàng)目的全過程

更新時(shí)間：2023年03月16日 11:18:45 作者：China_YF

nginx是一個(gè)高性能的HTTP和反向代理服務(wù)器,因此常用來做靜態(tài)資源服務(wù)器和后端的反向代理服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于Windows系統(tǒng)下使用nginx部署vue2項(xiàng)目的相關(guān)資料,需要的朋友可以參考下

前言：

今天產(chǎn)品經(jīng)理過來找我，問我有沒有什么辦法能夠讓前端做的項(xiàng)目給他看，他要測(cè)試一下看看我們開發(fā)的需求有沒有對(duì)齊。然后我就說：可以，有幾種辦法：

直接訪問我本地idea啟動(dòng)的服務(wù)，但是這樣我每次改代碼保存頁(yè)面就會(huì)刷新，這樣顯然不行，不穩(wěn)定。產(chǎn)品經(jīng)理直接把倉(cāng)庫(kù)代碼拉下來自己在本地運(yùn)行代碼，額，這雖然解決了上面這個(gè)問題，但是問題又來了，產(chǎn)品經(jīng)理他不懂前端，你又要幫他在他的電腦上準(zhǔn)備好前端的開發(fā)環(huán)境，顯然很麻煩。前端把項(xiàng)目打包部署到測(cè)試環(huán)境，這是很好的辦法，但是我們沒有測(cè)試環(huán)境的機(jī)器，那這咋整??????

想了許久，感覺產(chǎn)品經(jīng)理都要懷疑我的能力了，最后靈機(jī)一動(dòng)，咦！好像nginx也有windows版本的，我可以在我電腦上安裝一個(gè)nginx，然后把項(xiàng)目打包部署到nginx服務(wù)器上，那這樣產(chǎn)品經(jīng)理不是就可以訪問一個(gè)穩(wěn)定的測(cè)試環(huán)境了嗎。
最后就下載了windows版本的nginx，然后把項(xiàng)目打包部署到nginx服務(wù)器上，因?yàn)橹皀ginx接觸得少，所以這個(gè)過程中也遇到了很多問題，所以就寫一篇博客記錄一下，希望你看完這篇文章對(duì)你有所幫助，少走點(diǎn)彎路，廢話就不多說了，下面直接手摸手帶你部署vue2項(xiàng)目?。。?/p>

第一步：下載安裝nginx

1、首先我們要去nginx的官網(wǎng)下載windows版本的nginx

下載地址：

http://nginx.org/en/download.html 或者點(diǎn)擊這里下載

瀏覽器打開下載地址會(huì)看到如下圖所示界面，第一個(gè)是最新版本，第二個(gè)是穩(wěn)定版本，建議下載穩(wěn)定版本就好了，少遇到一些坑??

2、點(diǎn)擊下載鏈接后會(huì)下載得到如下一個(gè)nginx的壓縮包：

3、解壓nginx壓縮包，這里需要注意了哈，nginx的解壓路徑不能存在中文，否則nginx服務(wù)會(huì)無法正常啟動(dòng)的哈，不信你試試??

4、我們雙擊nginx.exe文件啟動(dòng)服務(wù)，細(xì)心觀察的小伙伴會(huì)發(fā)現(xiàn)有一個(gè)黑色的彈窗一閃而過就消失了，那這就啟動(dòng)就完成了。

5、然后我們打開瀏覽器訪問：http://localhost 如果出現(xiàn)如下界面則表示nginx服務(wù)成功啟動(dòng)！

6、如果無法正常訪問的話可以先查看nginx目錄下logs里面的日志文件，

造成無法正常啟動(dòng)的原因可能有如下兩點(diǎn)：

a、檢查解壓nginx的路徑是否存在中文

b、打開cmd命令行窗口輸入如下命令，查看80端口是否被占用了，nginx默認(rèn)啟動(dòng)的端口是80端口

netstat -ano | findstr 0.0.0.0:80

如果輸入上面命令出現(xiàn)如下內(nèi)容則表示端口被占用

7、如果端口被占用，我們需要修改nginx的默認(rèn)啟動(dòng)端口，使用記事本打開conf目錄下的nginx.conf配置文件

然后把server下面的80改成8081，然后保存，重新點(diǎn)擊nginx目錄下的nginx.exe文件

如果還是無法正常啟動(dòng)，可以查看nginx目錄下的logs目錄里面的錯(cuò)誤日志，然后自行百度一下，我只能幫到這里了??

8、下面來簡(jiǎn)單介紹一下nginx的幾個(gè)常用命令：

注意：需要在nginx目錄下才能執(zhí)行這些命令：

a、啟動(dòng)nginx：

E:\nginx-1.22.0>start nginx 或
E:\nginx-1.22.0>nginx.exe

b、停止nginx：

E:\nginx-1.22.0>nginx.exe -s stop 或
E:\nginx-1.22.0>nginx.exe -s quit

c、重新啟動(dòng)nginx：

E:\nginx-1.22.0>nginx.exe -s reload

當(dāng)修改了配置文件nginx.conf的內(nèi)容后，需要執(zhí)行上面這條命令，修改的配置才會(huì)生效。

第二步：打包部署vue2項(xiàng)目

1、打包vue項(xiàng)目：

npm run build

2、執(zhí)行上面命令后會(huì)把項(xiàng)目打包并輸出到dist目錄下(打包后的文件因個(gè)人而異，這里是我公司項(xiàng)目打包后dist目錄下的內(nèi)容)

3、在nginx目錄下的html目錄下新建一個(gè)static目錄，并把剛剛打包后dist目錄下所有文件都復(fù)制到static目錄下

4、修改nginx.conf配置文件

擔(dān)心圖片你們復(fù)制不了，就把server里面添加的配置也粘貼到下面了：

    server {
       # nginx啟動(dòng)監(jiān)聽的端口
        listen       8081;
        # 可以是localhost和可以是本機(jī)ip地址，如果要給公司其他同事的電腦可以訪問，需要 配置為本機(jī)的ip地址
        server_name  192.168.1.104;


	   # 配置頁(yè)面中發(fā)送的請(qǐng)求代理到后端接口	
	   location /api {
	           #需要代理訪問的后端服務(wù)器地址
	            proxy_pass http://10.8.5.42:8084;
	           #重寫以/api為baseURL的接口地址
	            rewrite "^/api/(.*)$" /$1 break;
	    }

       location / {
          #程序根目錄配置，也就是剛剛打包文件放置的目錄
            root   E:\\nginx-1.22.0\\html\\static;
            index  index.html index.htm;
	       # 配置把所有匹配不到的路徑重定向到index.html，vue-router的mode是history模式的情況下需要配置，否則會(huì)出現(xiàn)刷新頁(yè)面404的情況
	       try_files $uri $uri/ /index.html;
       }
       
    }

在這里再詳細(xì)說明一下上面添加的這些配置信息：

假設(shè)我現(xiàn)在把我windows系統(tǒng)上的nginx服務(wù)器的配置文件修改成上面這樣子，然后啟動(dòng)nginx服務(wù)器，當(dāng)我在瀏覽器中輸入http://192.168.1.104:8081的時(shí)候，因?yàn)槲业膎ginx服務(wù)器配置文件中的listen配置的端口是8081，所以瀏覽器的發(fā)送的http://192.168.1.104:8081這個(gè)請(qǐng)求會(huì)被端口為8081的nginx服務(wù)進(jìn)行處理，然后會(huì)被location / {} 匹配，然后nginx就會(huì)找配置的root 路徑下的index.html文件，并響應(yīng)給瀏覽器，這時(shí)瀏覽器就可以訪問到我們項(xiàng)目的頁(yè)面了。

這樣頁(yè)面就可以訪問了，但是頁(yè)面中發(fā)送的請(qǐng)求怎么進(jìn)行處理呢？

在vue項(xiàng)目中當(dāng)我們?cè)陧?yè)面中發(fā)送請(qǐng)求的時(shí)候，我們打開瀏覽器調(diào)試工具會(huì)看到，我們發(fā)送的請(qǐng)求的協(xié)議、域名和端口號(hào)其實(shí)是和訪問頁(yè)面的協(xié)議、域名和端口號(hào)是一樣的，但是真正后端服務(wù)器的接口請(qǐng)求地址不是這樣的。

這時(shí)候我們就需要使用nginx一個(gè)強(qiáng)大的功能了，沒錯(cuò)就是反向代理，我們可以配置nginx.conf文件，實(shí)現(xiàn)把頁(yè)面中發(fā)送的請(qǐng)求都通過nginx進(jìn)行反向代理訪問真實(shí)服務(wù)器（其實(shí)這也是一種跨域的解決方案）。

假設(shè)后端服務(wù)器的地址是http://10.8.5.42:8084，請(qǐng)求后端服務(wù)的登錄接口是http://10.8.5.42:8084/accounts/login，然后前端頁(yè)面中發(fā)送的登錄請(qǐng)求地址是：http://192.168.1.104:8081/api/accounts/login?userName=%E6%B2%88%E5%BF%A0%E6%98%8E&password=123456，這時(shí)我們就可以在nginx.conf配置文件中加入如下內(nèi)容：

看到這里有些伙伴可能就有疑問了，配置文件中的：

 rewrite "^/api/(.*)$" /$1 break;

具體是什么意思，這里我剛剛開始也不理解??，后來查閱了很多資料，最終就理解通了，
這段配置的作用就是重寫我們的請(qǐng)求地址，因?yàn)槲疫@里前端頁(yè)面發(fā)送的登錄請(qǐng)求接口http://192.168.1.104:8081/api/accounts/login有加了個(gè)/api的baseUrl，但是真實(shí)的后端服務(wù)的登錄接口http://10.8.5.42:8084/accounts/login是沒有這個(gè)/api前綴的，所以我在這里需要重寫前端發(fā)送的請(qǐng)求地址，把/api給去掉，想要具體了解的伙伴可以參考這篇文章：

https://cloud.tencent.com/developer/article/1531268

當(dāng)我們?cè)趎ginx.conf配置文件中添加了上面這些配置后，需要執(zhí)行nginx.exe -s reload命令來載入我們修改的配置，修改了配置文件一定要記得執(zhí)行這條命令哦！，如果執(zhí)行這個(gè)命令時(shí)出現(xiàn)下面的報(bào)錯(cuò)的話，不要慌！

出現(xiàn)這個(gè)問題的原因是：你的nginx并未啟動(dòng)，所以無法加載配置文件，你先執(zhí)行start nginx命令啟動(dòng)nginx再執(zhí)行這條命令即可！

說道這里vue項(xiàng)目的部署基本上就搞定了，該說的也說了，不該說的也啰嗦了很多?。?！下面我們來總結(jié)一下吧！

總結(jié)：

首先下載nginx壓縮包，然后解壓到一個(gè)沒有帶中文的路徑下，為啥要這樣我就不多說了
雙擊nginx目錄下的nginx.exe文件啟動(dòng)nginx服務(wù)
在瀏覽器中輸入http://localhost/，如果出現(xiàn)nginx的歡迎頁(yè)面則表示成功啟動(dòng)，如果無法訪問先看一下是不是解壓的路徑有中文，或者是端口是不是被占用了，如果不是以上原因，我們可以到logs目錄下查看nginx的錯(cuò)誤日志，然后自行百度。
到我們的vue項(xiàng)目的根目錄下執(zhí)行npm run build打包項(xiàng)目
然后把打包后的dist目錄下的所有內(nèi)容復(fù)制到nginx目錄下的html目錄下的static目錄里，這個(gè)路徑不是規(guī)定的，可以根據(jù)自己喜好，但是最好避免路徑中有中文。
然后就是修改nginx.conf配置文件了
最后一步也就是容易忘記的一步，就是執(zhí)行 nginx.exe -s reload 命令來重新載入配置文件。

到此這篇關(guān)于Windows系統(tǒng)下使用nginx部署vue2項(xiàng)目的文章就介紹到這了,更多相關(guān)Windows nginx部署vue2項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: