nginx部署多個項目;vue打包項目部署設置子路徑訪問;一個根域名(端口)配置多個子項目

本文解決:

  • vue打包項目部署設置子路徑訪問;
  • nginx部署多個子項目;
  • 一個ip/域名 端口 配置多個子項目;
  • 配置后,項目能訪問,但是刷新頁面就丟失的問題

注:本文需要nginx配置基礎。基礎不牢的可見文章:Nginx配置大全【六大使用場景、七大負載均衡策略、四大負載健康檢查】

一、在根目錄下的vue.config.js文件下,設置

// vue.config.js 配置說明
// 官方vue.config.js 參考文檔 https://cli.vuejs.org/zh/config/#css-loaderoptions
module.exports = {// 部署生產環境和開發環境下的URL。// 默認情況下,Vue CLI 會假設你的應用是被部署在一個域名的根路徑上// 如果應用被部署在一個子路徑上,你就需要用這個選項指定這個子路徑。例如,如果你的應用被部署  https://www.xxx.vip/admin/,則設置 publicPath 為 /admin/。publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/",  
}//  process.env.NODE_ENV 檢測當前的運行環境:開發(production)或生產(development)
// 如果開發和生產環境路徑都一樣,則直接: publicPath:"production"

二、在路由文件下配置(位置和文件名不固定,可以是src/router.js,也可以是src/router/index.js

//路由與組件引入
import Vue from 'vue'
import Router from 'vue-router'//創建路由對象
Vue.use(Router)export default new Router({// 根據開發環境,設置拼接路由base:  process.env.NODE_ENV === "production" ? "/admin/" : "/",//其他配置項
})

三、打包項目( 默認打包路徑是項目根目錄下的dist )

四、配置nginx

不會nginx基礎配置的,請移步文章《Nginx配置大全【六大使用場景、七大負載均衡策略、四大負載健康檢查】》

    # 配置訪問子路徑,(避免和文件路徑定義沖突,下面采用子路由的說法)location /admin/ {# 指定前端應用的根目錄,子路由訪問,不能再使用root,需要使用aliasalias   D:/打包的dist路徑/dist/;# 嘗試匹配文件,如果找不到則重定向到  /子路由/index.html#  如果不加前面的路徑,則會出現,頁面能訪問,但是不能刷新,一刷新就沒的情況。try_files $uri $uri/ /admin/index.html# 指定默認的索引文件index  index.html index.htm;}

注意點(上面配置代碼,每個注釋都看一下,避免一些bug):在這里插入圖片描述

五、如果需要配置多個項目,則重復以上操作。

常見問題bug:

1、nginx配置子路徑的時候,缺失斜桿 /
2、指定根目錄的時候,沒有采用alias,而是采用了root。(兩者區別下面會解析)
3、根目錄后面,缺失斜桿 /
4、項目可以訪問,但是不能刷新! 一刷新頁面就沒了:重定向沒有加子路由路徑try_files $uri $uri/ /子路由路徑/index.html

擴展:root 和 alias 的區別

1、root指令:

root指令用于定義與請求URI的根目錄關聯的路徑。
它會將請求URI中的斜杠后面的路徑添加到指定的根目錄后面。location /static/ {root   /var/www/;
}
如果請求的URI是/static/css/style.css,
那么Nginx會在/var/www/static/css/style.css路徑下查找相應的文件。

2、alias指令:

alias指令用于將請求URI的一部分映射到文件系統中的另一個路徑。
它會將請求URI中匹配location的部分替換為指定的路徑。location /static/ {alias   /var/www/;
}
如果請求的URI是/static/css/style.css,
那么Nginx會在/var/www/css/style.css路徑下查找相應的文件。

主要區別在于:
路徑處理方式:root指令將請求URI直接附加到根目錄,而alias指令會替換location匹配的部分。
路徑結尾斜杠處理:root指令會自動添加斜杠,而alias指令需要在路徑末尾手動添加斜杠以確保正確的路徑映射。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/39543.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/39543.shtml
英文地址,請注明出處:http://en.pswp.cn/web/39543.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

昇思學習打卡-6-基于MindSpore的GPT2文本摘要

第一次近距離接觸GPT,了解了tokenizers這個分詞庫,感覺NLP和CV對比起來,處理流程基本一致,都是數據集加載和處理,模型構建、選擇學習率、模型訓練,進而可以使用模型進行推理。 不同的是,NLP可能…

致力于打造一個操作最簡單、功能最全面、創意最豐富的聊天記錄管理工具

管理您的聊天數據 下載:https://download.csdn.net/download/mo3408/89497474 提供數據獲取、導出、分析全棧式解決方案 獲取信息 一鍵式操作,數據信手拈來 導出聊天記錄 批量導出、自定義時間、消息類型任意選、Word、Excel、HTML、TXT想要哪個勾哪個…

在地圖上根據經緯度,畫一個矩型圍欄,設置每個點的經緯度

在做一個需求時有一個小點就是添加一個配送區域(5公里直徑內的)矩形圍欄 我做的比較簡單 大家看看有沒有幫助, 也是精簡代碼。測試效果上相對是精準的 //谷歌,根據經緯度獲取以它為中心半徑為5公里內的矩形的四個點經緯度getDefalutPoints (lng: number, lat: num…

np.argsort

函數解釋 np.argsort是NumPy庫中的一個函數,用于對數組進行排序并返回排序后的索引。它不會直接對數組進行排序,而是返回一個數組,這個數組中的元素是原數組中元素按升序排序后的索引。 numpy.argsort(a, axis-1, kindNone, orderNone) 參…

adb push 報錯 ...error: failed to copy...

一、現象: 原因:沒有權限導致的 二、解決方法: adb root adb remount #重新加載文件系統三、再次嘗試:adb push xxx.apk /system/app 結果:成功

貓咖老板教你一招解決貓浮毛問題,質量好的貓用空氣凈化器分享

作為一名貓咖店老板,我經常被朋友問到關于寵物空氣凈化器的各種問題。有人認為這是個神器,而有人則認為這完全是花錢買智商稅。其實我剛開始對購買寵物空氣凈化器也持懷疑態度,心想這么多錢花下去真的有效嗎?但使用后,…

如何在Java項目中實現領域驅動設計(DDD)

如何在Java項目中實現領域驅動設計(DDD) 大家好,我是免費搭建查券返利機器人省錢賺傭金就用微賺淘客系統3.0的小編,也是冬天不穿秋褲,天冷也要風度的程序猿! 領域驅動設計概述 領域驅動設計(…

Axure教程:App側邊抽屜菜單交互制作

今天給大家示范一下抽屜菜單在Axure中的做法。在抽屜式菜單中,要實現兩個交互效果,分別是: 交互一 抽屜菜單中1、2級菜單項的伸縮效果 實現邏輯:設置動態面板的切換狀態及“推動/拉動原件”實現 交互二 菜單項的選中狀態切換 …

Python使用總結之為什么列表生成式的內存開銷比生成器表達式大?

Python使用總結之為什么列表生成式的內存開銷比生成器表達式大? 列表生成式 ([x*3 for x in gen_AB()]): 列表生成式會立即生成整個列表并將所有元素存儲在內存中。這意味著它需要的內存量取決于生成的列表中元素的數量。例如,如果 gen_AB() 生成了 1000…

前端面試題2(vue3)

1. Vue 3 中的 Composition API 是什么?與 Options API 的區別是什么? 答案: Composition API 是 Vue 3 引入的一種新的編程模型,它允許開發者以更靈活和模塊化的方式組織代碼。與傳統的 Options API 相比,Compositio…

vue的$nextTick是什么是干什么用的?

為什么需要使用$nextTick?他的使用場景 1.你在接口返回之后在獲取高度 正常等頁面加載在mounted這個鉤子函數里 這時候就需要找到接口賦值的地方 這樣就可以獲取到數據操作以后的dom元素了 $nextTick是什么是干什么用的? $nextTick() 是 Vue.js 框…

iPad卡在白蘋果開不了機怎么辦?3種解決辦法!

iPad開機卡在白蘋果?iPad Air 黑屏重啟白蘋果?iPad Pro 莫名關機,開機白蘋果無法啟動?iPad mini 摔落、泡水等,開機一直顯示白蘋果,iPad出現這些情況怎么辦? 無論是使用iPad、iPad Air、iPad P…

實驗一 MATLAB \ Python數字圖像處理初步

一、實驗目的: 1.熟悉及掌握在MATLAB\Python中能夠處理哪些格式圖像。 2.熟練掌握在MATLAB\Python中如何讀取圖像。 3.掌握如何利用MATLAB\Python來獲取圖像的大小、顏色、高度、寬度等等相關信息。 4.掌握如何在M…

Jupyter Notebook 說明 和 安裝教程【WIN MAC】

一、Jupyter Notebook 簡介(來源百度百科) Jupyter Notebook(此前被稱為 Python notebook)是一個交互式筆記本,支持運行40多種編程語言。 Jupyter Notebook 的本質是一個Web應用程序,便于創建和共享程序文…

為什么Vim是程序員最喜歡的文本編輯器之一?

為什么Vim是程序員最喜歡的文本編輯器之一? Vim(Vi IMproved)作為一種強大且靈活的文本編輯器,深受程序員的喜愛。雖然初學者可能會被其獨特的操作方式嚇到,但一旦掌握,Vim便能極大地提高生產力。本文將詳…

深度解碼:需求跟蹤的藝術與實戰應用

文章目錄 引言一、需求跟蹤的定義二、需求跟蹤矩陣2.1 需求跟蹤矩陣包含的內容2.2 跟蹤矩陣層級2.3 需求屬性2.4 參考表格 三、需求跟蹤的收益3.1 確保商業價值最大化3.2 滿足客戶期望3.3 范圍管理3.4 決策支持3.5 提高效率和效果3.6 文檔化和溝通3.7 變更管理3.8 測量和改進 四…

力扣第219題“存在重復元素 II”

在本篇文章中,我們將詳細解讀力扣第219題“存在重復元素 II”。通過學習本篇文章,讀者將掌握如何使用滑動窗口和哈希表來解決這一問題,并了解相關的復雜度分析和模擬面試問答。每種方法都將配以詳細的解釋,以便于理解。 問題描述…

WebKit多媒體引擎:深入探索Web內容的未來

WebKit多媒體引擎:深入探索Web內容的未來 在當今的Web世界中,多媒體內容的豐富性和互動性已成為用戶體驗的關鍵因素。WebKit,作為開源的瀏覽器引擎,以其高性能和對Web標準的支持而聞名。本文將深入探討WebKit如何處理多媒體內容&…

數據庫表導出到excel

數據庫表導出到excel:前置知識1 ALL_TAB_COLS 數據庫表導出到excel:前置知識2 Quartz基本使用 數據庫表導出到excel:前置知識3 項目封裝的Quartz實現動態定時任務 數據庫表導出到excel:前置知識4 業務和效果 發起清單下載control層InventoryDownloadLogController /* * */ pa…

iPhone白蘋果怎么修復?4個方法解決你的煩惱!

其實iPhone手機出現“白蘋果”這事,如果是iPhone輕度用戶,可能大家一輩子都不會遇到一次。但如果是iPhone重度用戶、越獄愛好者、軟件收集狂,可能就會遇到了。 白蘋果,一般指iOS設備出現軟、硬件故障,卡在一個類似于啟…