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