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;
		}

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Spring Cloud】Gateway组件的三种使用方式

🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《Spring Cloud》。🎯🎯 &am…

调用导致堆栈不对称。原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配。请检查 PInvoke 签名的调用约定和参数与非托管的目标签名是否匹配

作者推荐 【动态规划】C算法312 戳气球 关键字: 函数调用约定 混合编程 __stdcall c WINAPI APIENTRY _cdecl 调用方出错提示如下: 调用导致堆栈不对称。原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配。请检查 PInvoke 签名的调用约定和参…

如何利用 NFTScan Portfolio 功能分析钱包 NFT 持仓

随着 NFT 市场的扩大和投资者的增加,追踪和管理大量 NFT 资产正变得越来越复杂,无论是新手还是资深投资者,都需要借助实时的 NFT 数据作为判断依据。因此,一个能够全面分析 NFT 钱包持仓的工具就显得尤为重要。帮助投资者掌握自身…

SCS模型(径流曲线法)概述

目录 1.介绍:2.计算公式:参考文献:小结: 1.介绍: SCS模型(径流曲线法)是由美国农业部水土保持局(Soil Conservation Service) 基于经验提出,最初用于预测在农业用地小型流域降雨所累…

甄选前端源码分享(附效果图及在线演示)

甄选7款非常有趣的前端特效源码 其中包含css动画特效、js原生特效、svg特效等 下面我会给出特效样式图或演示效果图 但你也可以点击在线预览查看源码的最终展示效果及下载源码资源 纯CSS绘制任天堂Switch 纯CSS绘制的Switch手柄 后期可加工用于网页版的游戏手柄 以下图片只是…

脚本编程游戏引擎会遇到哪些问题

在游戏开发中,脚本编程已经成为了一种非常常见的方式,用来实现游戏逻辑和功能。但是脚本编程游戏引擎也可能会面临一些挑战和问题。下面简单的探讨一下都会遇到哪些问题,并且该如果做。 性能问题 脚本语言通常需要运行时解释执行&#xff0…

Java的输入和输出处理(二)字符篇

回顾 昨天我们学习了对文件进行字节的输入(InputStream)和字节的输出(OutputStream)。今天进行扩展,是在昨天的基础上处理的,相比于字符上的处理,我们工作更习惯于使用字节。 使用字符流读写文…

软件测试|好用的pycharm插件推荐(五)——Translation

前言 在我们的日常工作中,经常会遇到需要查看各个第三方库源码的问题,在很多情况下,我们的英语能力不能够满足我们完全读懂源码,所以我们就需要借助翻译工具来帮助我们理解第三方库的源码,如果我们将源码复制再使用其…

JavaScrip-初识JavaScript-知识点

初识JavaScript 编程基础编程计算机语言标记语言编译器&解释器 计算机基础计算机组成数据存储数据存储单位程序运行 认识JavaScript什么是JavaScriptJavaScript作用HTML&CSS&JavaScript的关系浏览器执行JavaScript过程JavaScript的组成JavaScript初体验 JavaScript…

对root用户的理解

1.什么是root用户? Windows、MacOS、Linux均采用多用户的管理模式进行权限管理。在Linux系统中,拥有最大权限的账户名为:root(超级管理员) root用户拥有最大的系统操作权限,而普通用户在许多地方的权限是受…

听劝,年度规划有它真的很必要!

2024年的时间进度条已走过一周,完成全年的1/52。 新年的flag悄然立下:愿逆风如解意,税后八个亿。 在不确定的世界中,发财暴富终归是确定的目标。 相比2023年的卷,年底的即兴生活正在悄悄上演,上一秒还在…

安达发|APS智能排产软件有哪些条件约束功能

APS智能排产软件是一种基于先进算法和人工智能技术的生产计划与调度系统,它可以帮助企业实现生产资源的优化配置,提高生产效率和降低生产成本。在实际应用中,APS智能排产软件需要满足多种条件约束功能,以满足不同企业的需求。以下…

VMware vSphere运维管理手册

适用版本:VMware vSphere 7.0 VMware vSphere 是 VMware 的虚拟化平台,可将数据中心转换为包括 CPU、存储和网络资源的聚合计算基础架构。vSphere 将这些基础架构作为一个统一的运行环境进行管理,并为您提供工具来管理加入该环境的数据中心。 ![[Pasted image 20231212132…

【DevOps-08-2】Harbor的基本操作

一、简要描述 Harbor作为镜像仓库,主要的交互方式就是将镜像上传到Harbor上,以及从Harbor上下载指定镜像 在传输镜像前,可以先使用Harbor提供的权限管理,将项目设置为私有项目,并对不同用户设置不同角色,从而更方便管理镜像。 二、Harbor添加用户和项目 1、添加Harbor用…

Python 编写不同时间格式的函数

该代码是一个时间相关的功能模块,提供了一些获取当前时间的函数。 Report_time() 函数返回当前时间的格式化字符串,例如 "20240110114512"。Y_M_D_h_m_s_time() 函数返回当前时间的年、月、日、时、分、秒的元组格式。Y_M_D_h_m_s() 函数返回…

Linux du和df命令

目录 一. df二. du 一. df ⏹用于显示系统级别,磁盘分区上的可用和已用空间的信息 -h:以人类可读的格式显示文件系统大小 ⏹每秒钟监视当前磁盘的使用情况 watch 用于周期性的执行特定的命令-n 1 表示每一秒刷新一次命令执行的结果df -h ./ 表示周期性…

如何利用期权解套股票?

我们都知道股票都是做多头排列的,但是当下行情其实并没有那么好,很多个股都是被套住的。这种情况下除了做T,利用期权也是降低自己损失的。有时候我们在投资上面可以交叉品种使用,这样可能我们的投资回报才会更好,也会更…

回顾基础--HTML篇

HTML语法规范 <html></html> 开始标签与结束标签 <br /> 单标签 包含关系 <head><title></title> </head>并列关系 <head></head> <body></body> 1、 标题标签 标题标签 【双标签】【不同标题字体大小…

GIT - 清除历史 Commit 瘦身仓库

目录 一.引言 二.仓库清理 ◆ 创建一个船新分支 ◆ 提交最新代码 ◆ 双指针替换分支 三.总结 一.引言 由于项目运行时间较长&#xff0c;分支较多&#xff0c;且分支内包含很多不同的大文件&#xff0c;随着时间的推移&#xff0c;历史 Git 库的容量日渐增发&#xff0c…

RocketMQ源码 Consumer 消费者源码架构分析

前言 消息消费者 MQConsumer 即消息的消费方&#xff0c;主要负责消息消息生产者 MQ Producer 投递的消息。它的源码架构如下图&#xff0c;以常用的消费者实现类 DefaultMQPushConsumer 视角分析消费者的源码架构&#xff0c;介绍消费者核心数据结构。 DefaultMQPushConsume…