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报错:[emerg] getpwnam(“www“)failed问题及解决

    nginx报错:[emerg] getpwnam(“www“)failed问题及解决

    这篇文章主要介绍了nginx报错:[emerg] getpwnam(“www“)failed问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • Nginx中全局变量整理小结

    Nginx中全局变量整理小结

    对于Nginx下全局变量整理,方便使用Nginx的朋友调用全局变量。
    2010-08-08
  • 利用Nginx的map指令实现页面跳转

    利用Nginx的map指令实现页面跳转

    每位网站运营人可能都会碰到一些情况,比如网站URL规则会进行调整,需求的不断变化也会导致一些旧的URL无法访问,这个时候可以使用Nginx的 map指令匹配这些旧的URL,并跳转到新的URL规则,而且这种方式是在Nginx层面进行,不会对网站性能产生影响。下面来一起看看吧。
    2016-10-10
  • 详解nginx实现https网站设置

    详解nginx实现https网站设置

    这篇文章主要介绍了详解nginx实现https网站设置,详细的介绍了HTTPS简介和证书生成等,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Nginx实现三种常见的虚拟主机配置方法

    Nginx实现三种常见的虚拟主机配置方法

    Nginx 是一款高性能的 Web 服务器,支持多种虚拟主机配置方式,能够根据域名、IP 或端口区分不同的站点,这种灵活性让 Nginx 成为搭建多站点服务的首选工具,本文将带你一步步实现三种常见的虚拟主机配置方法,需要的朋友可以参考下
    2025-03-03
  • Nginx中root与alias区别讲解

    Nginx中root与alias区别讲解

    这篇文章主要介绍了Nginx中root与alias区别 ,通过两个小例子来学习root和alias的区别,对Nginx中root与alias区别感兴趣的朋友跟随小编一起看看吧
    2022-08-08
  • Nginx防盗链根据UA屏蔽恶意User Agent请求(防蜘蛛)

    Nginx防盗链根据UA屏蔽恶意User Agent请求(防蜘蛛)

    相对于 Apache,Nginx 占用的系统资源更少,更适合 VPS 使用。恶意盗链的 User Agent 无处不在,博客更换到 WordPress 没几天,就被 SPAM(垃圾留言)盯上,又被暴力破解后台用户名密码。今天来介绍 Nginx 屏蔽恶意 User Agent请求的方法
    2016-07-07
  • nginx反向代理之多端口映射的实现

    nginx反向代理之多端口映射的实现

    这篇文章主要介绍了nginx反向代理之多端口映射的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Nginx启动时80端口被占用的问题解决

    Nginx启动时80端口被占用的问题解决

    本文主要介绍了在启动Nginx时遇到80端口被占用的问题及解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-12-12
  • Nginx实现基于请求头的访问控制配置的示例

    Nginx实现基于请求头的访问控制配置的示例

    在Nginx中,可以使用"allow"和"deny"指令来实现IP访问限制,本文给大家介绍Nginx实现基于请求头的访问控制配置,感兴趣的朋友一起看看吧
    2023-11-11

最新评论