nginx同網域名稱下部署多個vue專案

2021-09-25 07:27:04 字數 1567 閱讀 6397

一.需求

想要在同乙個網域名稱下部署多個前端專案,通過不同url來區分呼叫相應前端專案。

比如:部署專案a,專案b。想要效果如下。

瀏覽器輸入:http://localhost:8082/a/,展示專案a。

瀏覽器輸入:http://localhost:8082/b/,展示專案b。

三. nginx常用命令

進入nginx安裝目錄,開啟終端

啟動服務:start nginx

停止服務:nginx -s stop nginx -s quit

檢視nginx版本:nginx -v

四. nginx目錄介紹

一般我們部署的時候,會把vue專案發布到html資料夾中,並且修改conf資料夾下的nginx.conf檔案。

五. vue打包配置

修改vue.config.js,沒有這個檔案在專案根目錄新建乙個。

修改全域性router.js檔案

六.nginx.conf配置

server 

location /a/

location /b/

error_page 500

502503

504/

50x.html;

location =

/50x.html

}

6.1 可以單獨寫乙個配置檔案,在nginx.conf中引入。這樣方便我們後期的維護

在conf目錄下新建乙個otherconf資料夾。並在此資料夾下新建乙個a配置檔案。

a檔案

server 

location /a/

location /b/

error_page 500 502 503 504 /50x.html;

location = /50x.html

}

在nginx.conf檔案http模組中引入。

nginx 同乙個網域名稱下部署多個工程

今天又乙個需求 今天我們部署上線的系統,又兩個系統,兩個系統都是前後端分離的 然後公司最後只給我們分配的乙個子網域名稱 這就比較蛋疼了 通過配置兩個子目錄來配置兩個工程 後台管理臺 admin 使用者客戶端 client 有了這個想法 就開始配了 先按照nginx yum install nginx...

如何在nginx下部署vue專案

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!首先我們使用npm run build來生成專案的靜態頁面,會在專案的根路徑的dist目錄下 我們將dist下的index.html和static靜態檔案發布到伺服器的某一目錄下 比如說我們發布的是 在usr local vue page下,那麼我...

centos 安裝nginx 並部署vue專案

前言 因為之前在學校期間學習時一直使用的linux是ubuntu系統,最近在工作期間大哥讓我在centos上安裝nginx 並部署一下前端的vue專案,至此就記錄一下步驟。一.gcc 安裝yum install y gcc c 二.pcre pcre devel 安裝 pcre perl compa...