nginx配置同一域名同一端口下部署多个vue项目的实现

 更新时间:2023年10月25日 10:15:57   作者:coderkey  
本地开发好了多个前端微信网页项目,想部署上线,本文就来介绍一下nginx配置同一域名同一端口下部署多个vue项目的实现,具有一定的参考价值,感兴趣的可以了解一下

前言:

本地开发好了多个前端微信网页项目,想部署上线,但是微信那边必须得在默认端口下访问前端项目,于是就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项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • nginx+keepalived实现高可用实践

    nginx+keepalived实现高可用实践

    keepalived是一个集群管理工具,保证集群高可用,通过VRRP协议选举出主节点,保证业务连续性,文中以部署Nginx+Keepalived高可用集群为例,详细描述了部署过程
    2026-05-05
  • 利用nginx和腾讯云免费证书制作https的方法

    利用nginx和腾讯云免费证书制作https的方法

    这篇文章主要介绍了利用nginx和腾讯云免费证书制作https的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • nginx 内置变量详解及隔离进行简单的拦截

    nginx 内置变量详解及隔离进行简单的拦截

    这篇文章主要介绍了nginx 隔离进行简单的拦截详解的相关资料,这里对nginx内置变量进行了简单的介绍并对隔离拦截进行了详解, 需要的朋友可以参考下
    2016-12-12
  • Nginx服务器作反向代理时的缓存配置要点解析

    Nginx服务器作反向代理时的缓存配置要点解析

    这篇文章主要介绍了Nginx服务器作反向代理时的缓存配置要点解析,需要的朋友可以参考下
    2016-04-04
  • Nginx接收Http协议请求转发使用Https协议的问题

    Nginx接收Http协议请求转发使用Https协议的问题

    这篇文章主要介绍了Nginx接收Http协议请求转发使用Https协议,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • Ubuntu环境下安装部署Nginx并设置自启动过程

    Ubuntu环境下安装部署Nginx并设置自启动过程

    文章主要介绍了使用wget下载Nginx及相关依赖包,解配置、编译、安装Nginx的过程,N并ginx模块配置、启动及管理等内容,并N提供ginx.service文件配置和,解决启动报错等问题
    2026-05-05
  • 使用Nginx、Nginx Plus抵御DDOS攻击的方法

    使用Nginx、Nginx Plus抵御DDOS攻击的方法

    DDOS 是一种通过大流量的请求对目标进行轰炸式访问,导致提供服务的服务器资源耗尽进而无法继续提供服务的攻击手段。这篇文章主要介绍了使用Nginx、Nginx Plus抵御DDOS攻击的方法,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • nginx中用JSON格式记录日志的配置示例

    nginx中用JSON格式记录日志的配置示例

    这篇文章主要介绍了nginx中用JSON格式记录日志的配置示例,其实就是定义一个JSON的日志格式,然后在需要的地方调用即可,需要的朋友可以参考下
    2014-07-07
  • ELK与Grafana联合打造可视化监控来分析nginx日志

    ELK与Grafana联合打造可视化监控来分析nginx日志

    这篇文章主要为大家介绍了ELK与Grafana的联合打造可视化监控来分析nginx日志,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-03-03
  • Nginx搭载负载均衡及前端项目部署

    Nginx搭载负载均衡及前端项目部署

    本文介绍了如何使用Nginx实现负载均衡和前端项目部署,通过配置Nginx的负载均衡功能,可以有效地分发客户端请求,提高服务器的处理能力,感兴趣的可以了解一下
    2023-11-11

最新评论