Windows系統(tǒng)下如何使用nginx部署vue2項(xiàng)目

這篇文章主要講解了“Windows系統(tǒng)下如何使用nginx部署vue2項(xiàng)目”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Windows系統(tǒng)下如何使用nginx部署vue2項(xiàng)目”吧！

第一步：下載安裝nginx

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

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、下面來簡單介紹一下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;


	   # 配置頁面中發(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)刷新頁面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)目的頁面了。

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

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

這時(shí)候我們就需要使用nginx一個(gè)強(qiáng)大的功能了，沒錯(cuò)就是反向代理，我們可以配置nginx.conf文件，實(shí)現(xiàn)把頁面中發(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，然后前端頁面中發(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)槲疫@里前端頁面發(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給去掉

當(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í)行這條命令即可！

感謝各位的閱讀，以上就是“Windows系統(tǒng)下如何使用nginx部署vue2項(xiàng)目”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Windows系統(tǒng)下如何使用nginx部署vue2項(xiàng)目這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！