nginx配置同一域名同一端口下部署多個vue項目的實現
更新時間：2023年10月25日 10:15:57 作者：coderkey
本地開發(fā)好了多個前端微信網頁項目,想部署上線,本文就來介紹一下nginx配置同一域名同一端口下部署多個vue項目的實現,具有一定的參考價值,感興趣的可以了解一下
前言：
本地開發(fā)好了多個前端微信網頁項目，想部署上線，但是微信那邊必須得在默認端口下訪問前端項目，于是就nginx配置同一域名同一端口下部署多個vue項目。
問題：
默認端口就只有一個，多個項目實現不了。
解決方法：
根據根路徑不同分別代理訪問不同項目，剛好解決這個問題。
第一步：
在vue.config.js文件中修改publicPath路徑為/project/
const path = require("path");
// import path from 'path'
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
publicPath: "/project/",
// 選項...
devServer: {
open: true, // 設置自動打開
port: 8080, // 設置端口號
// host: '192.168.0.124', // ip 本地
// hotOnly: true, // 熱更新
disableHostCheck: true, // 解決 Invalid Host header的原因
proxy: {
//設置代理
"/connect": {
target: "https://open.weixin.qq.com",
changeOrigin: true,
// ws: true, //如果要代理 websockets，配置這個參數
secure: false, //如果是http接口，需要配置該參數
pathRewrite: {
"^/": "",
},
}
},
},
configureWebpack: {
resolve: {
alias: {
//這里配置了components文件的路徑別名
"@": resolve("src"),
// components: resolve("src/components"),
},
},
},
};
第二步：
在router文件夾中index.js文件中修改base為 ‘/project/’
const router = new VueRouter({
mode: "history",
// mode: "hash",
// base: process.env.BASE_URL,
base: "/project/",
routes,
});
第三步：
打包生成dist文件夾，然后放在對應的位置上 ，配置nginx，這里用的是window服務器；
server {
listen 80;
server_name www.coderkey.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root F:/parant/dist;
try_files $uri $uri/ /index.html;
}
location /project {
alias F:/subparant/dist;
try_files $uri $uri/ /project/index.html;
index index.html;
}
以上全部搞完之后就可以訪問了；
// 例如: http://www.coderkey.com http://www.coderkey.com/project
到此這篇關于nginx配置同一域名同一端口下部署多個vue項目的實現的文章就介紹到這了,更多相關nginx配置多個vue項目內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
![nginx報錯:[emerg] getpwnam(“www“)failed問題及解決](http://img.jbzj.com/images/xgimg/bcimg0.png)
nginx報錯:[emerg] getpwnam(“www“)failed問題及解決
這篇文章主要介紹了nginx報錯:[emerg] getpwnam(“www“)failed問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
對于Nginx下全局變量整理，方便使用Nginx的朋友調用全局變量。2010-08-08
每位網站運營人可能都會碰到一些情況，比如網站URL規(guī)則會進行調整，需求的不斷變化也會導致一些舊的URL無法訪問，這個時候可以使用Nginx的 map指令匹配這些舊的URL，并跳轉到新的URL規(guī)則，而且這種方式是在Nginx層面進行，不會對網站性能產生影響。下面來一起看看吧。2016-10-10
這篇文章主要介紹了詳解nginx實現https網站設置，詳細的介紹了HTTPS簡介和證書生成等，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Nginx 是一款高性能的 Web 服務器,支持多種虛擬主機配置方式,能夠根據域名、IP 或端口區(qū)分不同的站點,這種靈活性讓 Nginx 成為搭建多站點服務的首選工具,本文將帶你一步步實現三種常見的虛擬主機配置方法,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了Nginx中root與alias區(qū)別?,通過兩個小例子來學習root和alias的區(qū)別，對Nginx中root與alias區(qū)別感興趣的朋友跟隨小編一起看看吧2022-08-08
Nginx防盜鏈根據UA屏蔽惡意User Agent請求(防蜘蛛)
相對于 Apache，Nginx 占用的系統(tǒng)資源更少，更適合 VPS 使用。惡意盜鏈的 User Agent 無處不在，博客更換到 WordPress 沒幾天，就被 SPAM（垃圾留言）盯上，又被暴力破解后臺用戶名密碼。今天來介紹 Nginx 屏蔽惡意 User Agent請求的方法2016-07-07
這篇文章主要介紹了nginx反向代理之多端口映射的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
本文主要介紹了在啟動Nginx時遇到80端口被占用的問題及解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-12-12
在Nginx中,可以使用"allow"和"deny"指令來實現IP訪問限制,本文給大家介紹Nginx實現基于請求頭的訪問控制配置,感興趣的朋友一起看看吧2023-11-11