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

更新時(shí)間：2024年06月03日 10:56:03 作者：strggle_bin

本文主要介紹了nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目,可以根據(jù)根路徑不同分別代理訪問不同項(xiàng)目,具有一定的參考價(jià)值,感興趣的可以了解一下

問題：

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

解決方法：

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

第一步：

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

......
module.exports = {
  // 部署生產(chǎn)環(huán)境和開發(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)目 頁面訪問地址 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)目 頁面訪問地址 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配置同一域名同一端口下部署多個(gè)vue項(xiàng)目的文章就介紹到這了,更多相關(guān)nginx部署多vue項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: