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 會假設你的應用是被部署在一個域名的根路徑上
  // 例如 https://www.ruoyi.vip/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.ruoyi.vip/admin/，則設置 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.

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

您可能感興趣的文章: