nginx 部署多个vue项目

2023-11-01

ngxin下载后解压即可
1.vue项目配置(基于若依框架的前端项目)

vue项目配置

.env.staging文件

# 页面标题
VUE_APP_TITLE = xx管理

#用于配置 nginx的子路径
NODE_ENV = production

# 测试环境配置
ENV = 'staging'
#访问的接口
VUE_APP_BASE_API = 'http://ip地址:8089'

.env.production文件

# 生产环境配置
ENV = 'production'

# 生产环境 访问nginx代理接口的路径
VUE_APP_BASE_API = '/prod-api'

vuefig.js文件

在这里插入图片描述
在这里插入图片描述

router->index.js文件

在这里插入图片描述

nginx配置

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    
   server {
        listen       80;  #端口号 可以更改成其他
        #listen       443 ssl;   如果是域名需要用 ssl证书
        server_name  localhost;  
        #默认
        location / {    
            index  index.html index.htm;
	     root   D:/xxx/xxx/dist; #vue打包后的地址
	      try_files $uri $uri/ @router;
        }
	
	#当前项目
	  location /dh/ {
		root  html;   #项目打包文件的存放路径  ./nginx/html/dh("和location /##/ 中的值对应")/
            index  index.html index.htm;   
	      try_files $uri $uri/ /dh/index.html;   #刷新时调用的页面路径
        }
		
		#代理的后端接口地址
        location /prod-api {
        	#匹配规则
            rewrite ^.+prod-api/?(.*)$ /$1 break;
            #接口地址 
          	proxy_pass http://127.0.0.1:8089;
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-Ip $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }



        location @router {
            rewrite ^.*$ /index.html last;
        }
	  error_page   500 502 503 504  /50x.html;
        location = /50x.html {
          root   html;
    	  }
	}
  }




本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

nginx 部署多个vue项目 的相关文章

随机推荐

  • vue中template的三种写法

    第一种 字符串模板写法 直接写在vue构造器里 这种写法比较直观 适用于html代码不多的场景 但是如果模板里html代码太多 不便于维护 不建议这么写 第二种 直接写在template标签里 这种写法跟写html很像 第三种 写在scri
  • Mybatis的代码自动生成插件(Free Mybatis plugin)

    介绍 使用的是Free Mybatis plugin代码生成插件 在idea的plugins中可以搜索到 并且是免费的 唯一的不足就是 代码如果重新生成 会被覆盖掉 所以需要手动的进行合并源代码 不过通过git可以比较好的解决该问题 安装
  • 算法导论:钢条切割问题方法全解(递归+动态规划)

    public class Main public static void main String args Main main new Main int p 0 1 5 8 9 10 17 17 20 24 30 System out pr
  • python网络爬虫--基本概念(1)

    一 爬虫简介 1 1 爬虫的定义 网络爬虫 又被称为网页蜘蛛 网络机器人 在FOAF社区中间 更经常的称为网页追逐者 是一种按照一定的规则 自动批量化地抓取万维网信息的程序或者脚本 自动批量化的抓取既有数据 模拟客户端发送请求 接受数据 1
  • PMP题目与解题思路(第五天)

    PMP题目与解题思路 第五天 41 在一次社交集会中 一位团队成员无意中告诉一位相关方项目已经落后于进度计划 并且构成重大延迟 与项目经理沟通该问题时 该相关方非常激动 此时项目经理应该怎么做 A 同团队回顾风险管理计划 B 创建相关方影响
  • 使用JQgrid常用 (实战经常用)

    jqgrid参数 jqGrid参数 名称 类型 描述 默认值 可修改 url string 获取数据的地址 datatype string 从服务器端返回的数据类型 默认xml 可选类型 xml local json jsonnp scri
  • stm32智能小车设计

    提前说说 博主是用寄存器写的驱动 历时两周 总算把小车弄好了 总体上来说做的太慢了 自己在32的学习中还不够仔细深入 只是浅面的学习 当真正做一个项目时 暴露的问题就太多了 这次在小车的制作的过程中 遇到了各种各样的问题 软件 硬件 各式各
  • openwrt上opkg更新报错"opkg_download: Failed to download ............."

    開始搞op的时候 看到op居然能够直接安装一些插件 激动坏了 由于这东西对嵌入式的小系统来说简直不敢想 可是op就支持了 就是这么任性 好不easy编译了固件 依照网上的教程 telnet进去 首先opkg update 结果没有想象中的华
  • discuz密码找回:[1]忘记UCENTER创始人密码

    人们都是健忘的 何况每天的事情很多 有些站长更是兼职做 赚点外快而已 而ucenter更是不常用 所以忘记密码是在正常不过的事情 如果密码忘记怎么找回呢 方法有很多种 例如用comsenz tools工具 但是这个有版本问题 有些人怕装上出
  • LeetCode:4.寻找两个正序数组中的中位数(median-of-two-sorted-arrays)思路与题解

    LeetCode 4 寻找两个正序数组中的中位数 median of two sorted arrays 包含输入的完整代码LeetCode 4 寻找两个正序数组中的中位数 median of two sorted arrays Java完
  • 报错 java.lang.IndexOutOfBoundsException: Index: 0, Size: 0 解决方案

    Android项目报错 java lang IndexOutOfBoundsException Index 0 Size 0 我忘记截图了哈哈哈 记录一下错误原因 找了老半天 ok 出现这种错误是数组值没有取到 我们可以在取值之前加一个判断
  • 微信人人商城云服务器,微信支付 · 微智人人商城使用文档 · 看云

    支付管理 添加新模板 https box kancloud cn a39c011c0de721adce0ebef9b95162d4 1151x763 png 公众号appid获取方法 登陆公众平台 左侧导航 开发 基本配置 开发者ID AP
  • C# 将时间戳 byte[] 转换成 datetime 的几个方法

    推荐方法 DateTime now DateTime Now byte bts BitConverter GetBytes now ToBinary DateTime rt DateTime FromBinary BitConverter
  • LLM的用法

    一 生成表格 推测以下评价内容的情绪 情绪只包括 客观 积极 消极 输出表格 格式 编号 段落前10个字摘要 情绪判断 1 这东西给用户最大的门槛就是 描述是否精准 你描述的越精准 他给你的答案也就越精准 所以那些根本不知道自己需求是什么的
  • Android面试必备的JVM虚拟机制详解,看完之后简历上多一个技能!

    掌握了本篇知识之后 简历上就可以多加一条个人技能了 熟悉 JVM 相关知识 包括内存区域 内存模型 GC 类加载机制 编译优化等 下面就是正文了 欢迎讨论 目录 内存区域 内存模型 内存分配回收策略 Java 对象的创建 内存布局和访问定位
  • 蓝桥杯 算法训练 拿金币(java)

    蓝桥杯 算法训练 拿金币 java 题 试题 算法训练 拿金币 资源限制 时间限制 1 0s 内存限制 256 0MB 问题描述 有一个N x N的方格 每一个格子都有一些金币 只要站在格子里就能拿到里面的金币 你站在最左上角的格子里 每次
  • 6.ES基础概念及术语详细解读

    一 Elasticsearch概述 ES是基于Lucene的搜索服务器 它提供了一个分布式多用户能力的全问搜索引擎 且ES支持RestFulweb风格的url访问 ES是基于Java开发的开源搜索引擎 设计用于云计算 能够达到实时搜索 稳定
  • js数组的顺序排序、完全随机打乱排序 总结

    一 顺序排序 1 按字符编码排序 sort var testArray 23 500 1000 300 34 2 testArray sort alert testArray 2 1000 23 300 34 500 2 将数组元素倒序排
  • unittest测试框架+ddt数据驱动

    unittest测试框架 unittest测试框架 四个核心组件 TestCase Testfixure TestSuite testRunner assert impront unittest测试框架 在编写接口自动化测试用例时 如果不采
  • nginx 部署多个vue项目

    这里写目录标题 vue项目配置 env staging文件 env production文件 vuefig js文件 router gt index js文件 nginx配置 ngxin下载后解压即可 1 vue项目配置 基于若依框架的前端