nginx部署vue項(xiàng)目,給訪問(wèn)路徑加前綴的實(shí)現(xiàn)
Nginx安裝與啟動(dòng)
去官網(wǎng)下載nginx壓縮包，解壓到電腦合適位置，我這放在D盤(pán)，目錄是D:\nginx-1.21.6，
在這個(gè)路徑，直接輸入cmd，打開(kāi)命令行，啟動(dòng)命令：
nginx.exe
或者
start nginx
關(guān)閉命令
taskkill /f /t /im nginx.exe
改了配置文件，不需要先關(guān)閉再啟動(dòng)，直接重啟，重啟命令
nginx -s reload
Vue增加訪問(wèn)路徑
有時(shí)候會(huì)根據(jù)需要，區(qū)分不用的vue項(xiàng)目，這樣要加一個(gè)前綴，不加前綴，訪問(wèn)是http://localhost:8080/，加一個(gè)前綴，cancer，訪問(wèn)路徑就是http://localhost:8080/cancer
這個(gè)路徑，在router/index.js修改配置，增加一個(gè)base
const router = new VueRouter({
routes: routes.concat(asyncRouterMap),
base: window.publicPath ? window.publicPath + "/" : "",
mode:
process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test"
? "history"
: "hash",
});window.publicPath就是需要的前綴，window.publicPath = “/cancer”;
然后npm run build打包，把打包后的文件，在nignx路徑下html文件夾下，新建一個(gè)文件夾，cancer，把包里的內(nèi)容放進(jìn)去
nginx配置
server {
#前端啟動(dòng)端口監(jiān)聽(tīng)
listen 8780;
#本機(jī)ip，也可以是域名
server_name 192.168.2.87;
location / {
root html;
index index.html index.htm;
}
location /cancer {
alias html/cancer;
index index.html index.htm;
try_files $uri $uri/ /cancer/index.html;
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
nginx緩存頁(yè)面后 串會(huì)話問(wèn)題的解決方法
nginx支持頁(yè)面緩存，之前我的博客有介紹配置方案，昨天出了一個(gè)詭異的問(wèn)題，別人的機(jī)器登錄后，我的機(jī)器打開(kāi)應(yīng)用的首頁(yè)會(huì)出現(xiàn)別人的用戶信息，也就是說(shuō)我的瀏覽器訪問(wèn)的應(yīng)用會(huì)話其實(shí)是別人的會(huì)話2013-06-06
通過(guò)nginx反向代理來(lái)調(diào)試代碼的實(shí)現(xiàn)
這篇文章主要介紹了通過(guò)nginx反向代理來(lái)調(diào)試代碼的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
最近一直在做location 配置,遇到優(yōu)先級(jí)別問(wèn)題（如果配置不當(dāng)可能存在安全隱患哦）,下面這篇文章主要給大家介紹了關(guān)于Nginx中Location配置的相關(guān)資料,需要的朋友可以參考下2023-01-01
開(kāi)啟Nginx時(shí)端口被占用提示：Address already in use
這篇文章主要介紹了開(kāi)啟Nginx時(shí)端口被占用提示：Address already in use的解決方法，文中通過(guò)兩種方法給大家介紹了Nginx的啟動(dòng)、停止與重啟 的操作方法 ,需要的朋友可以參考下2018-09-09
Linux下Nginx負(fù)載均衡多個(gè)tomcat配置的方法步驟
這篇文章主要介紹了Linux下Nginx負(fù)載均衡多個(gè)tomcat配置的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
Nginx限制IP訪問(wèn)的實(shí)現(xiàn)示例
限制某些IP地址訪問(wèn)網(wǎng)站是一個(gè)常見(jiàn)的需求,本文主要介紹了Nginx限制IP訪問(wèn)的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
使用Nginx進(jìn)行URL轉(zhuǎn)發(fā)的配置案例
Nginx是一個(gè)高性能的Web服務(wù)器和反向代理服務(wù)器,它還可以用于URL轉(zhuǎn)發(fā),在本教學(xué)文章中,我們將從安裝Nginx開(kāi)始,逐步介紹配置步驟,并展示一個(gè)URL轉(zhuǎn)發(fā)的案例,感興趣的朋友可以參考下2023-09-09
nginx啟動(dòng)、配置及測(cè)試圖文詳解(全網(wǎng)最全)
nginx是一個(gè)輕量級(jí)的網(wǎng)頁(yè)服務(wù)器、方向代理服務(wù)器和電子郵件代理服務(wù)器,具有配置靈活、靜態(tài)資源高并發(fā)、系統(tǒng)資源占用少、擁有緩存服務(wù)等優(yōu)點(diǎn),這篇文章主要給大家介紹了關(guān)于nginx啟動(dòng)、配置及測(cè)試的相關(guān)資料,需要的朋友可以參考下2024-02-02
nginx提供了對(duì)文件內(nèi)容壓縮的功能,允許將內(nèi)容在發(fā)送到客戶端之前根據(jù)具體的策略進(jìn)行壓縮從而節(jié)約帶寬,下面這篇文章主要給大家介紹了如何通過(guò)一篇文章讀懂nginx的gzip功能,需要的朋友可以參考下2022-05-05
NginxWebUI 是一款圖形化管理 nginx 配置的工具,可以使用網(wǎng)頁(yè)來(lái)快速配置 nginx單機(jī)與集群的各項(xiàng)功能,本文就來(lái)介紹一下Nginx網(wǎng)頁(yè)配置工具nginxWebUI的具體使用,感興趣的可以了解一下2023-08-08