nginx配置同一域名同一端口下部署多個vue項目的實現(xiàn)
前言:
本地開發(fā)好了多個前端微信網(wǎng)頁項目,想部署上線,但是微信那邊必須得在默認(rèn)端口下訪問前端項目,于是就nginx配置同一域名同一端口下部署多個vue項目。
問題:
默認(rèn)端口就只有一個,多個項目實現(xiàn)不了。
解決方法:
根據(jù)根路徑不同分別代理訪問不同項目,剛好解決這個問題。
第一步:
在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, // 設(shè)置自動打開
port: 8080, // 設(shè)置端口號
// 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,配置這個參數(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配置同一域名同一端口下部署多個vue項目的實現(xiàn)的文章就介紹到這了,更多相關(guān)nginx配置多個vue項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
nginx報錯:[emerg] getpwnam(“www“)failed問題及解決
這篇文章主要介紹了nginx報錯:[emerg] getpwnam(“www“)failed問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
利用Nginx的map指令實現(xiàn)頁面跳轉(zhuǎn)
每位網(wǎng)站運營人可能都會碰到一些情況,比如網(wǎng)站URL規(guī)則會進(jìn)行調(diào)整,需求的不斷變化也會導(dǎo)致一些舊的URL無法訪問,這個時候可以使用Nginx的 map指令匹配這些舊的URL,并跳轉(zhuǎn)到新的URL規(guī)則,而且這種方式是在Nginx層面進(jìn)行,不會對網(wǎng)站性能產(chǎn)生影響。下面來一起看看吧。2016-10-10
詳解nginx實現(xiàn)https網(wǎng)站設(shè)置
這篇文章主要介紹了詳解nginx實現(xiàn)https網(wǎng)站設(shè)置,詳細(xì)的介紹了HTTPS簡介和證書生成等,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Nginx防盜鏈根據(jù)UA屏蔽惡意User Agent請求(防蜘蛛)
相對于 Apache,Nginx 占用的系統(tǒng)資源更少,更適合 VPS 使用。惡意盜鏈的 User Agent 無處不在,博客更換到 WordPress 沒幾天,就被 SPAM(垃圾留言)盯上,又被暴力破解后臺用戶名密碼。今天來介紹 Nginx 屏蔽惡意 User Agent請求的方法2016-07-07

