摘要:此時(shí)我們可以看到有如下目錄路徑下放置我們前端好的代碼如何,相信各位都會(huì),下有個(gè)非常重要的文件,用來(lái)配置服務(wù)器。
第一步: 下載 nginx
nginx download官網(wǎng)地址
下載后,將其解壓到 本地的任一目錄下。
此時(shí)我們可以看到有如下目錄:
html路徑下放置我們前端 build好的代碼(如何build,相信各位都會(huì)),conf下有個(gè)非常重要的文件nginx.conf,用來(lái)配置nginx服務(wù)器。
第二步: 配置nginx服務(wù)器打開(kāi)nginx.conf文件,直接找到配置server 的地方,取消掉暫時(shí)用不到的配置,下面便是我的配置:
server { # 啟動(dòng)后的端口 listen 8880; # 啟動(dòng)時(shí)的地址 server_name localhost; # 啟動(dòng)后,地址欄輸入: localhost:8880, 默認(rèn)會(huì)在html文件夾下找 index.html文件 location / { root html; index index.html; } # 404頁(yè)面配置,頁(yè)面同樣在html文件夾中 error_page 404 /404.html; location = /404.html { root html; } # 其他錯(cuò)誤碼頁(yè)面配置 error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # 配置代理。由于項(xiàng)目是在本地起動(dòng)的,而我們的request需要請(qǐng)求其他ip地址。如果你的request鏈接為localhost:8880/abc/login?name=12345,那么下面配的就是location /abc location /api { proxy_pass http://192.168.0.0:80; } # 一把前端不管用vue,還是react等框架,默認(rèn)都是單頁(yè)面的,如果你的項(xiàng)目是多頁(yè)面的,則需要用到下面的配置。 # 因?yàn)榇藭r(shí)你的瀏覽器的url不是localhost:8880/#/login,而是 localhost:8880/a.html/#/login # 所以我們需要將路徑中a.html指向具體的html文件夾中的文件,因?yàn)槟J(rèn)是index.html location /a.html { alias html; index a.html; } location /b.html{ alias html; index b.html; } }第三步: 將build好的內(nèi)容放到nginx下的html文件夾下
只需要dist下的內(nèi)容,如
第四步: 啟動(dòng)nginx服務(wù)器在
路徑下右鍵,打開(kāi)命令號(hào)工具,并輸入
>start nginx
然后在瀏覽器地址欄輸入
localhost:8880
即可
第五步: 停止nginx服務(wù)器>nginx -s stop注意事項(xiàng)
1、在修改nginx.conf文件時(shí),每行的末尾必須帶有分好";",否則會(huì)報(bào)錯(cuò)。
2、有些命令行工具在執(zhí)行start nginx后,一閃而過(guò),所以你并不知道到底啟動(dòng)了還是沒(méi)有,可以運(yùn)行下面的命令:
tasklist /fi "imagename eq nginx.exe"
結(jié)果類(lèi)似于這樣
3、如果你運(yùn)行nginx -s stop命令后,再次運(yùn)行tasklist /fi "imagename eq nginx.exe"命令發(fā)現(xiàn)還是有進(jìn)程,并沒(méi)有停止,可以訪問(wèn)任務(wù)管理器,然后結(jié)束進(jìn)程
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/53590.html
摘要:此時(shí)我們可以看到有如下目錄路徑下放置我們前端好的代碼如何,相信各位都會(huì),下有個(gè)非常重要的文件,用來(lái)配置服務(wù)器。 第一步: 下載 nginx nginx download官網(wǎng)地址 下載后,將其解壓到 本地的任一目錄下。 此時(shí)我們可以看到有如下目錄:showImg(https://segmentfault.com/img/bVbnrba?w=158&h=152); html路徑下放置我們前...
摘要:此時(shí)我們可以看到有如下目錄路徑下放置我們前端好的代碼如何,相信各位都會(huì),下有個(gè)非常重要的文件,用來(lái)配置服務(wù)器。 第一步: 下載 nginx nginx download官網(wǎng)地址 下載后,將其解壓到 本地的任一目錄下。 此時(shí)我們可以看到有如下目錄:showImg(https://segmentfault.com/img/bVbnrba?w=158&h=152); html路徑下放置我們前...
摘要:此時(shí)我們可以看到有如下目錄路徑下放置我們前端好的代碼如何,相信各位都會(huì),下有個(gè)非常重要的文件,用來(lái)配置服務(wù)器。 第一步: 下載 nginx nginx download官網(wǎng)地址 下載后,將其解壓到 本地的任一目錄下。 此時(shí)我們可以看到有如下目錄:showImg(https://segmentfault.com/img/bVbnrba?w=158&h=152); html路徑下放置我們前...
摘要:此外,其也能夠提供強(qiáng)大的反向代理功能。是由為俄羅斯訪問(wèn)量第二的站點(diǎn)開(kāi)發(fā)的,第一個(gè)公開(kāi)版本發(fā)布于年月日。 keepalived+nginx 實(shí)現(xiàn)高可用雙機(jī)熱備 + 負(fù)載均衡架構(gòu) 1 準(zhǔn)備4個(gè)ubuntu16.04虛擬機(jī)(啟用網(wǎng)卡二并使用橋接模式):A服務(wù)器:192.168.0.103 主B服務(wù)器:192.168.0.104 主(備) 前端工程師學(xué)習(xí) Nginx ...
閱讀 1156·2021-11-08 13:13
閱讀 1733·2019-08-30 15:55
閱讀 2791·2019-08-29 11:26
閱讀 2456·2019-08-26 13:56
閱讀 2582·2019-08-26 12:15
閱讀 2156·2019-08-26 11:41
閱讀 1421·2019-08-26 11:00
閱讀 1555·2019-08-23 18:30