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