前言：

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

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

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

第一步：下載安裝nginx

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

下載地址：

http://nginx.org/en/download.html  或者 點擊這里下載

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

2、點擊下載鏈接后會下載得到如下一個nginx的壓縮包：

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

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

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

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

造成無法正常啟動的原因可能有如下兩點：

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

b、打開cmd命令行窗口輸入如下命令，查看80端口是否被占用了，nginx默認啟動的端口是80端口

netstat -ano | findstr 0.0.0.0:80 

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

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

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

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

8、下面來簡單介紹一下nginx的幾個常用命令：

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

a、啟動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、重新啟動nginx：

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

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

第二步：打包部署vue2項目

1、打包vue項目：

npm run build

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

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

4、修改nginx.conf配置文件

擔心圖片你們復制不了，就把server里面添加的配置也粘貼到下面了：

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


	   # 配置頁面中發(fā)送的請求代理到后端接口	
	   location /api {
	           #需要代理訪問的后端服務器地址
	            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模式的情況下需要配置，否則會出現(xiàn)刷新頁面404的情況
	       try_files $uri $uri/ /index.html;
       }
       
    }

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

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

這樣頁面就可以訪問了，但是頁面中發(fā)送的請求怎么進行處理呢？

在vue項目中當我們在頁面中發(fā)送請求的時候，我們打開瀏覽器調試工具會看到，我們發(fā)送的請求的協(xié)議、域名和端口號其實是和訪問頁面的協(xié)議、域名和端口號是一樣的，但是真正后端服務器的接口請求地址不是這樣的。

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

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

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

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

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

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

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

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

說道這里vue項目的部署基本上就搞定了，該說的也說了，不該說的也啰嗦了很多！?。∠旅嫖覀儊砜偨Y一下吧！

總結：

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

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

最新評論