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