亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

nginx配置同一域名同一端口下部署多個vue項目

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

問題:

默認端口就只有一個,有多個項目需要部署到同一端口下。

解決方法:

根據(jù)根路徑不同分別代理訪問不同項目

第一步:

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

......
module.exports = {
  // 部署生產(chǎn)環(huán)境和開發(fā)環(huán)境下的URL。
  // 默認情況下,Vue CLI 會假設(shè)你的應(yīng)用是被部署在一個域名的根路徑上
  // 例如 https://www.ruoyi.vip/。如果應(yīng)用被部署在一個子路徑上,你就需要用這個選項指定這個子路徑。例如,如果你的應(yīng)用被部署在 https://www.ruoyi.vip/admin/,則設(shè)置 baseUrl 為 /admin/。
  publicPath: "/project/",
  // 在npm run build 或 yarn build 時 ,生成文件的目錄名稱(要和baseUrl的生產(chǎn)環(huán)境路徑一致)(默認dist)
  outputDir: 'dist',
  // 用于放置生成的靜態(tài)資源 (js、css、img、fonts) 的;(項目打包之后,靜態(tài)資源會放在這個文件夾下)
  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;
	# 這個是第一個vue項目 頁面訪問地址 http://ip:9001
    location / {
    	 # root  F:/parant/dist;
         root   /home/project/dist/;
         index  index.html;
         try_files $uri $uri/ /index.html;
    }
    # 這個是第二個vue項目 頁面訪問地址 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
    }
}

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

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

相關(guān)文章

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

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

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

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

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

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

    這篇文章主要介紹了nginx 代理80端口轉(zhuǎn)443端口的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(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)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用Nginx具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • nginx proxy_cache批量清除緩存的腳本介紹

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

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

    Windows nginx安裝教程及簡單實踐

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

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

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

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

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

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

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

最新評論