Nginx部署Vue項(xiàng)目添加訪問(wèn)后綴方式
更新時(shí)間：2025年01月24日 09:10:57 作者：星巡打雜工
文章介紹了如何根據(jù)需要為Vue項(xiàng)目配置不同的訪問(wèn)路徑,并通過(guò)Nginx進(jìn)行相應(yīng)的配置,通過(guò)設(shè)置`vue.config.js`中的`publicPath`和`route`的`base`為`/app`,并將打包后的文件放入指定目錄,然后在Nginx配置中使用`alias`和`try_files`指令來(lái)處理路徑
Nginx部署Vue項(xiàng)目添加訪問(wèn)后綴
有時(shí)候會(huì)根據(jù)需要，區(qū)分不同的vue項(xiàng)目，這樣要加一個(gè)后綴，不加后綴，訪問(wèn)是http://localhost/，加一個(gè)后綴，app，訪問(wèn)路徑就是http://localhost/app
一、vue工程配置
1.vue.config.js publicPath 配置為 /app/
2.route配置base為 /app,model為history
將打包后vue工程文件放入 /usr/share/nginx/html/app 目錄
二、nginx配置
server {
listen 80;
server_name ip地址或域名;
location /app {
alias /usr/share/nginx/html/app/;
try_files $uri $uri/ /app/index.html;
}
}三、重啟nginx
再訪問(wèn)時(shí)就要加上 app后綴了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Nginx配置Https免費(fèi)證書(shū)訪問(wèn)步驟
這篇文章主要為大家介紹了Nginx配置Https免費(fèi)證書(shū)訪問(wèn)步驟,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Nginx RTMP是一個(gè)Nginx插件,支持將RTMP和HLS流添加到媒體服務(wù)器,本文將以u(píng)buntu為例為大家介紹一下如何安裝使用nginx Rtmp 插件的步驟,需要的可以參考下2023-10-10
Nginx配置SSL證書(shū)出現(xiàn)PEM_read_bio_PrivateKey() failed錯(cuò)誤解決
在配置GoDaddy的SSL證書(shū)并啟動(dòng)Nginx時(shí),可能遇到由于證書(shū)密鑰文件編碼問(wèn)題導(dǎo)致的啟動(dòng)失敗,具體表現(xiàn)為nginx報(bào)錯(cuò)：PEM_read_bio_PrivateKey() failed,本文就來(lái)介紹一下,感興趣的可以了解學(xué)習(xí)2024-10-10
Nginx的proxy_cache模塊提供了強(qiáng)大而靈活的緩存功能,本文主要介紹了深入理解Nginx的proxy_cache模塊,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
LNMP 解決Access Denied錯(cuò)誤詳細(xì)介紹
這篇文章主要介紹了LNMP 解決Access Denied錯(cuò)誤詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-10-10
nginx反向代理60s超時(shí)報(bào)錯(cuò)問(wèn)題解決
本文主要介紹了Nginx反向代理時(shí)遇到60秒超時(shí)報(bào)錯(cuò)的問(wèn)題,經(jīng)過(guò)排查發(fā)現(xiàn)是由于代理服務(wù)執(zhí)行時(shí)間過(guò)長(zhǎng)導(dǎo)致的,具有一定的參考價(jià)值,感興趣的可以了解一下2025-02-02
Nginx使用反向代理實(shí)現(xiàn)負(fù)載均衡過(guò)程解析
這篇文章主要介紹了Nginx使用反向代理實(shí)現(xiàn)負(fù)載均衡過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
Nginx 配置TCP代理轉(zhuǎn)發(fā)的實(shí)現(xiàn)
本文主要介紹了使用Nginx新版的stream方式,實(shí)現(xiàn)TCP/UDP代理轉(zhuǎn)發(fā),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-10-10
基于nginx實(shí)現(xiàn)上游服務(wù)器動(dòng)態(tài)自動(dòng)上下線無(wú)需reload的實(shí)現(xiàn)方法
這篇文章主要介紹了基于nginx實(shí)現(xiàn)上游服務(wù)器動(dòng)態(tài)自動(dòng)上下線無(wú)需reload,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
這篇文章主要介紹了nginx add_header指令使用方法，nginx配置文件通過(guò)使用add_header指令來(lái)設(shè)置response header,需要的朋友可以參考下2014-03-03