nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目的實(shí)現(xiàn)
前言:
本地開發(fā)好了多個(gè)前端微信網(wǎng)頁(yè)項(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
文件夾,然后放在對(duì)應(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)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
nginx報(bào)錯(cuò):[emerg] getpwnam(“www“)failed問題及解決
這篇文章主要介紹了nginx報(bào)錯(cuò):[emerg] getpwnam(“www“)failed問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03利用Nginx的map指令實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)
每位網(wǎng)站運(yùn)營(yíng)人可能都會(huì)碰到一些情況,比如網(wǎng)站URL規(guī)則會(huì)進(jìn)行調(diào)整,需求的不斷變化也會(huì)導(dǎo)致一些舊的URL無(wú)法訪問,這個(gè)時(shí)候可以使用Nginx的 map指令匹配這些舊的URL,并跳轉(zhuǎn)到新的URL規(guī)則,而且這種方式是在Nginx層面進(jìn)行,不會(huì)對(duì)網(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簡(jiǎn)介和證書生成等,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06Nginx實(shí)現(xiàn)三種常見的虛擬主機(jī)配置方法
Nginx 是一款高性能的 Web 服務(wù)器,支持多種虛擬主機(jī)配置方式,能夠根據(jù)域名、IP 或端口區(qū)分不同的站點(diǎn),這種靈活性讓 Nginx 成為搭建多站點(diǎn)服務(wù)的首選工具,本文將帶你一步步實(shí)現(xiàn)三種常見的虛擬主機(jī)配置方法,需要的朋友可以參考下2025-03-03Nginx防盜鏈根據(jù)UA屏蔽惡意User Agent請(qǐng)求(防蜘蛛)
相對(duì)于 Apache,Nginx 占用的系統(tǒng)資源更少,更適合 VPS 使用。惡意盜鏈的 User Agent 無(wú)處不在,博客更換到 WordPress 沒幾天,就被 SPAM(垃圾留言)盯上,又被暴力破解后臺(tái)用戶名密碼。今天來介紹 Nginx 屏蔽惡意 User Agent請(qǐng)求的方法2016-07-07Nginx啟動(dòng)時(shí)80端口被占用的問題解決
本文主要介紹了在啟動(dòng)Nginx時(shí)遇到80端口被占用的問題及解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12Nginx實(shí)現(xiàn)基于請(qǐng)求頭的訪問控制配置的示例
在Nginx中,可以使用"allow"和"deny"指令來實(shí)現(xiàn)IP訪問限制,本文給大家介紹Nginx實(shí)現(xiàn)基于請(qǐng)求頭的訪問控制配置,感興趣的朋友一起看看吧2023-11-11