欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目的實(shí)現(xiàn)

 更新時(shí)間:2023年10月25日 10:15:57   作者:coderkey  
本地開發(fā)好了多個(gè)前端微信網(wǎng)頁(yè)項(xiàng)目,想部署上線,本文就來介紹一下nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下

前言:

本地開發(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問題及解決

    這篇文章主要介紹了nginx報(bào)錯(cuò):[emerg] getpwnam(“www“)failed問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2025-03-03
  • Nginx中全局變量整理小結(jié)

    Nginx中全局變量整理小結(jié)

    對(duì)于Nginx下全局變量整理,方便使用Nginx的朋友調(diào)用全局變量。
    2010-08-08
  • 利用Nginx的map指令實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

    利用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è)置

    這篇文章主要介紹了詳解nginx實(shí)現(xiàn)https網(wǎng)站設(shè)置,詳細(xì)的介紹了HTTPS簡(jiǎn)介和證書生成等,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • Nginx實(shí)現(xiàn)三種常見的虛擬主機(jī)配置方法

    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ū)別講解

    Nginx中root與alias區(qū)別講解

    這篇文章主要介紹了Nginx中root與alias區(qū)別?,通過兩個(gè)小例子來學(xué)習(xí)root和alias的區(qū)別,對(duì)Nginx中root與alias區(qū)別感興趣的朋友跟隨小編一起看看吧
    2022-08-08
  • Nginx防盜鏈根據(jù)UA屏蔽惡意User Agent請(qǐng)求(防蜘蛛)

    Nginx防盜鏈根據(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-07
  • nginx反向代理之多端口映射的實(shí)現(xiàn)

    nginx反向代理之多端口映射的實(shí)現(xiàn)

    這篇文章主要介紹了nginx反向代理之多端口映射的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • Nginx啟動(dòng)時(shí)80端口被占用的問題解決

    Nginx啟動(dòng)時(shí)80端口被占用的問題解決

    本文主要介紹了在啟動(dòng)Nginx時(shí)遇到80端口被占用的問題及解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-12-12
  • Nginx實(shí)現(xiàn)基于請(qǐng)求頭的訪問控制配置的示例

    Nginx實(shí)現(xiàn)基于請(qǐng)求頭的訪問控制配置的示例

    在Nginx中,可以使用"allow"和"deny"指令來實(shí)現(xiàn)IP訪問限制,本文給大家介紹Nginx實(shí)現(xiàn)基于請(qǐng)求頭的訪問控制配置,感興趣的朋友一起看看吧
    2023-11-11

最新評(píng)論