Vue项目nginx部署到线上,访问时加前缀解决方案

一、业务场景:
最近项目开发完了,需要部署一个测试版本和正式版本到线上,测试版本前面需要加一个dev前缀,遇到了一些坑,分享给大家

二、目前效果
在这里插入图片描述
三、具体实现步骤:
(1)实现静态文件加前缀

  • 在vue.config.js文件里改变路径
	publicPath: process.env.NODE_ENV === "production" ? "/dev/" : "/dev/",  

(2)更改router模式,添加前缀

  • 在配置路由模式的地方加上 base参数
	export default new Router({base: "/dev",mode: 'history',routes: constantRouterMap})

四、打包项目

  • 根据package.json文件中的打包命令把项目打包一下
	npm run build

五、检查打包文件
确认一下打包后dist文件夹下面的index.html里面引入的文件前面的dev前缀有没有加上。
加上了在到nginx上进行部署,否则在重复上面的操作,不用往下进行,没加上肯定是访问不了的。
在这里插入图片描述
六、将打包好的文件放入nginx服务器
请先确认打包的文件 前缀加上了在扔到服务器上
请先确认打包的文件 前缀加上了在扔到服务器上
请先确认打包的文件 前缀加上了在扔到服务器上
把dist文件夹的名字改成前缀名称 dev 放入nginx服务器的静态目录下面

七、nginx部署
部署命令如下:

		location /dev {alias   html/dev;try_files $uri $uri/ /dev/index.html;index  index.html index.htm;}

八、效果展示:
在这里插入图片描述
你已经成功了,撒花。
今天的分享到此结束,欢迎小伙伴们一起交流

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/611509.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

构建安全可靠的系统:第二十一章到附录 A

第二十一章:建立安全和可靠性文化 原文:21. Building a Culture of Security and Reliability 译者:飞龙 协议:CC BY-NC-SA 4.0 作者:Heather Adkins 与 Peter Valchev,Felix Grbert,Ana Oprea…

艾思控AQMD6008BLS-TE无刷电机驱动使用笔记(配合STM32)

一、介绍 本驱动器使用的电机电流精确检测技术、有感无刷电机自测速、有感无刷电机转动位置检测、再生电流恒电流制动(或称刹车)技术和强大的PID调节技术可地控制电机平稳正反转、换向及制动,输出电流实时调控防止过流,精准控制电…

GC2804——GC2803 的升级,12V H桥驱动,8 个NPN达林顿晶体管,采用SSOP24 封装,应用于安防步进电机驱动产品上

GC2804 是 GC2803 的升级,在内部集成了 8 个 NPN 达林顿晶体管连接阵列的基础上,又集成了一路 12V 的 H 桥驱动。8 个 NPN 达林顿阵列用来驱动高压的步进电机,H 桥驱动可以用来驱动 IR-CUT,此芯片专用于安防摄像头系统方案。该 GC…

十分钟部署清华 ChatGLM-6B,实测效果超预期(Linux版)

前段时间,清华公布了中英双语对话模型 ChatGLM-6B,具有60亿的参数,初具问答和对话功能。 最!最!最重要的是它能够支持私有化部署,大部分实验室的服务器基本上都能跑起来。因为条件特殊,实验室网…

从零学Java 集合概述

Java 集合概述 文章目录 Java 集合概述1 什么是集合?2 Collection体系集合2.1 Collection父接口2.1.1 常用方法2.1.2 Iterator 接口 1 什么是集合? 概念:对象的容器,定义了对多个对象进行操作的常用方法;可实现数组的功能。 和数组区别&…

Logo设计神器:适合新手的简易操作软件,快速入门!

标志设计软件在品牌营销和企业识别中发挥着重要作用。本文将对10款知名标志设计软件进行横向评价,从不同维度评价其功能、易用性、创意和适用性,帮助您选择最适合您需求的标志设计软件。 1.即时设计 推荐指数:★★★★★ 即时设计是一款功…

springboot 2.7 oauth server配置源码走读一

springboot 2.7 oauth server配置源码走读 入口: 上述截图中的方法签名和OAuth2AuthorizationServerConfiguration类中的一个方法一样,只不过我们自己的配置类优先级比spring中的配置类低,算是配置覆盖,看下图所示: …

阿里云国际服务器设置安全防护程序

阿里云云服务器(ECS)提供弹性、安全、高性能、高性价比的虚拟云服务器,满足您的所有需求。立即在这里免费注册! 常见 Web 应用程序 请勿对 Web 服务控制台(如 WDCP、TOMCAT、Apache、Nginx、Jekins、PHPMyAdmin、Web…

JavaScript数组sort()对负数排序的陷阱

前言 想着好久没去力扣刷题了,刚好手上的需求也差不多了,就去看了看。看到一个难度级别为困难的题,看到这个题想着直接使用JS现成的方法,先concat再sort。再取中间值不就实现了吗。是不是你们也这么想,哈哈哈。 就是…

11 个 Python全栈开发工具集

前言 以下是专注于全栈开发不同方面的 Python 库;有些专注于 Web 应用程序开发,有些专注于后端,而另一些则两者兼而有之。 1. Taipy Taipy 是一个开源的 Python 库,用于构建生产就绪的应用程序前端和后端。 它旨在加快应用程序开发&#xf…

2024--Django平台开发-Django知识点(五)

day05 django知识点 今日概要: 中间件 【使用】【源码】cookie 【使用】【源码 - Django底层请求本质】session【使用】【源码 - 数据库请求周期中间件】 1.中间件 1.1 使用 编写类,在类型定义:process_request、process_view、process_…

【C++】STL 算法 ⑨ ( 预定义函数对象示例 - 将容器元素从大到小排序 | sort 排序算法 | greater<T> 预定义函数对象 )

文章目录 一、预定义函数对象示例 - 将容器元素从大到小排序1、sort 排序算法2、greater<T> 预定义函数对象 二、代码示例 - 预定义函数对象1、代码示例2、执行结果 一、预定义函数对象示例 - 将容器元素从大到小排序 1、sort 排序算法 C 标准模板库 ( STL , Standard Te…

离散数学-二元关系

4.1关系的概念 1)序偶及n元有序组 由两个个体x和y&#xff0c;按照一定顺序排序成的、有序数组称为有序偶或有序对、二元有序组&#xff0c; 记作<x&#xff0c;y>&#xff0c;其中x是第一分量&#xff0c;y是第二分量。 相等有序偶&#xff1a;第一分量和第二分量分…

游戏开发中,你的游戏图片压缩格式使用ASTC了吗

文章目录 ASTC原理&#xff1a;使用要求 ASTC&#xff08;Adaptive Scalable Texture Compression&#xff0c;自适应可伸缩纹理压缩&#xff09;是一种高级的纹理压缩技术&#xff0c;由ARM公司开发并推广。它在图形处理领域中因其出色的压缩效率和灵活性而受到广泛关注。 AST…

前端国际化之痛点(二):多包多库场景下联动多语言

前言 VoerkaI18n是一款非常优秀的前端国际化解决方案&#xff0c;其开发的出发点是为了解决现存多语言的一些痛点,接下来几篇文章将分别进行分析。 前端国际化之痛点(一)&#xff1a;让人头疼的词条Key前端国际化之痛点(二)&#xff1a;多包多库场景下联动多语言前端国际化之…

Jetson Orin AGX 64GB更新 Jetpack6.0

Jetson Orin AGX 64GB更新 Jetpack6.0 注意&#xff1a; 1&#xff0c;如果你要向我一样为AGX更新Jetpack6.0的话&#xff0c;它还要求你的ubuntu版本必须是20.04 或22.04 2&#xff0c;安装完SDKmanager后&#xff0c;然后选择对应的设备&#xff0c;根据个人选择勾选是否安装…

【Mysql】InnoDB 引擎中的页目录

一、页目录和槽 现在知道记录在页中按照主键大小顺序串成了单链表。 那么我使用主键查询的时候&#xff0c;最顺其自然的办法肯定是从第一条记录&#xff0c;也就是 Infrimum 记录开始&#xff0c;一直向后找&#xff0c;只要存在总会找到。这种在数据量少的时候还好说&#x…

四、K8S-Deployment(无状态服务)

目录 一、引入Deployment 二、Deployment资源清单 三、Deployment支持的功能 1、扩缩容 1、通过命令行方式修改 2 、在线编辑yaml文件方式修改 2、镜像更新 1、重建更新 2、滚动更新 3、金丝雀发布&#xff08;灰度更新&#xff09; [rootk8s-master-1 ~]# kubectl g…

centos用yum安装mysql详细教程

1 查询安装mysql的yum源,命令如下 ls /etc/yum.repos.d/ -l 界面如下图所示&#xff0c;未显示mysql的安装源 2 安装mysql相关的yum源,例如&#xff1a; 例如&#xff1a;rpm -ivh mysql57-community-release-el7.rpm 要注意 mysql的版本和系统的版本匹配 mysql57-communi…

【高等数学之泰勒公式】

一、从零开始 1.1、泰勒中值定理1 什么是泰勒公式?我们先看看权威解读: 那么我们从古至今到底是如何创造出泰勒公式的呢? 由上图可知&#xff0c;任一无穷小数均可以表示成用一系列数字的求和而得出的结果&#xff0c;我们称之为“无穷算法”。 那么同理我们想对任一曲线来…