欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目

 更新時(shí)間:2024年06月03日 10:56:03   作者:strggle_bin  
本文主要介紹了nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目,可以根據(jù)根路徑不同分別代理訪問(wèn)不同項(xiàng)目,具有一定的參考價(jià)值,感興趣的可以了解一下

問(wèn)題:

默認(rèn)端口就只有一個(gè),有多個(gè)項(xiàng)目需要部署到同一端口下。

解決方法:

根據(jù)根路徑不同分別代理訪問(wèn)不同項(xiàng)目

第一步:

在vue.config.js文件中修改publicPath路徑為/project/

......
module.exports = {
  // 部署生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境下的URL。
  // 默認(rèn)情況下,Vue CLI 會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上
  // 例如 https://www.ruoyi.vip/。如果應(yīng)用被部署在一個(gè)子路徑上,你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑。例如,如果你的應(yīng)用被部署在 https://www.ruoyi.vip/admin/,則設(shè)置 baseUrl 為 /admin/。
  publicPath: "/project/",
  // 在npm run build 或 yarn build 時(shí) ,生成文件的目錄名稱(要和baseUrl的生產(chǎn)環(huán)境路徑一致)(默認(rèn)dist)
  outputDir: 'dist',
  // 用于放置生成的靜態(tài)資源 (js、css、img、fonts) 的;(項(xiàng)目打包之后,靜態(tài)資源會(huì)放在這個(gè)文件夾下)
  assetsDir: 'static',
  ......
}

第二步:

在router文件夾中index.js文件中修改base為 ‘/project/’

... ...
const createRouter = () => new Router({
  base: '/project/', // 調(diào)整這里,路徑跟publicPath保持一致即可
  mode: 'history',   // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: routers 
})

打包

調(diào)整完畢后,直接執(zhí)行build打包命令,可以發(fā)現(xiàn)index.html引入js路徑增加了/project

... ...
<script type="text/javascript" src="/project/static/js/chunk-vendors.js"></script>
<script type="text/javascript" src="/project/static/js/app.js"></script>
... ...

調(diào)整nginx的server配置

server {
    listen       9001;
    server_name  localhost;
	# 這個(gè)是第一個(gè)vue項(xiàng)目 頁(yè)面訪問(wèn)地址 http://ip:9001
    location / {
    	 # root  F:/parant/dist;
         root   /home/project/dist/;
         index  index.html;
         try_files $uri $uri/ /index.html;
    }
    # 這個(gè)是第二個(gè)vue項(xiàng)目 頁(yè)面訪問(wèn)地址 http://ip:9001/project
    location  /project {
    	 # alias  F:/subparant/dist;
         alias   /home/other_project/dist/;
         index   index.html;
         try_files $uri $uri/ /project/index.html;	#解決刷新404
    }
}

注意:如果頁(yè)面中有二級(jí)路由的話,配置文件中一定不能用root,要用alias.

到此這篇關(guān)于nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目的文章就介紹到這了,更多相關(guān)nginx部署多vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Nginx反向代理中出現(xiàn)502錯(cuò)誤的解決步驟

    Nginx反向代理中出現(xiàn)502錯(cuò)誤的解決步驟

    反向代理是一種服務(wù)器代理的方式,它代理了客戶端的請(qǐng)求并將請(qǐng)求轉(zhuǎn)發(fā)給后端服務(wù)器,然后將后端服務(wù)器的響應(yīng)返回給客戶端,但經(jīng)常會(huì)遇到502錯(cuò)誤,所以本文給大家介紹了Nginx反向代理中出現(xiàn)502錯(cuò)誤的解決步驟,需要的朋友可以參考下
    2025-03-03
  • centos環(huán)境下nginx高可用集群的搭建指南

    centos環(huán)境下nginx高可用集群的搭建指南

    為了防止Nginx單點(diǎn)故障造成服務(wù)器癱瘓,本文介紹了Nginx實(shí)現(xiàn)高可用集群構(gòu)建,下面這篇文章主要給大家介紹了關(guān)于centos環(huán)境下nginx高可用集群的搭建指南,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • nginx 代理80端口轉(zhuǎn)443端口的實(shí)現(xiàn)

    nginx 代理80端口轉(zhuǎn)443端口的實(shí)現(xiàn)

    這篇文章主要介紹了nginx 代理80端口轉(zhuǎn)443端口的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • 制作nginx的RPM包教程

    制作nginx的RPM包教程

    這篇文章主要介紹了制作nginx的RPM包的方法,需要的朋友可以參考下
    2014-07-07
  • 如何利用Nginx防止IP地址被惡意解析詳解

    如何利用Nginx防止IP地址被惡意解析詳解

    這篇文章主要給大家介紹了關(guān)于如何利用Nginx防止IP地址被惡意解析的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Nginx具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • nginx proxy_cache批量清除緩存的腳本介紹

    nginx proxy_cache批量清除緩存的腳本介紹

    今天小編就為大家分享一篇關(guān)于nginx proxy_cache批量清除緩存的腳本介紹,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧
    2019-02-02
  • Windows nginx安裝教程及簡(jiǎn)單實(shí)踐

    Windows nginx安裝教程及簡(jiǎn)單實(shí)踐

    這篇文章主要介紹了Windows nginx安裝教程及簡(jiǎn)單實(shí)踐的相關(guān)資料,需要的朋友可以參考下
    2016-10-10
  • Nginx禁止國(guó)外IP訪問(wèn)我的網(wǎng)站的實(shí)現(xiàn)

    Nginx禁止國(guó)外IP訪問(wèn)我的網(wǎng)站的實(shí)現(xiàn)

    本文主要介紹了Nginx禁止國(guó)外IP訪問(wèn)我的網(wǎng)站的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • nginx proxy_pass反向代理配置中url后加不加/的區(qū)別介紹

    nginx proxy_pass反向代理配置中url后加不加/的區(qū)別介紹

    這篇文章主要給大家介紹了關(guān)于nginx proxy_pass反向代理配置中url后加不加/的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-11-11
  • 通過(guò)瀏覽器查看nginx服務(wù)器狀態(tài)配置方法

    通過(guò)瀏覽器查看nginx服務(wù)器狀態(tài)配置方法

    這篇文章主要介紹了通過(guò)瀏覽器查看nginx服務(wù)器狀態(tài)配置方法,本文講解開(kāi)啟nginx-status的配置方法,并對(duì)服務(wù)器的參數(shù)做了詳細(xì)講解,需要的朋友可以參考下
    2015-04-04

最新評(píng)論