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

news2024/11/18 9:30:02

一、业务场景:
最近项目开发完了,需要部署一个测试版本和正式版本到线上,测试版本前面需要加一个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.coloradmin.cn/o/1371700.html

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

相关文章

SAP PP配置学习(五)

查找 四、 其它 设置 MM 过帐号码范围 定义凭证号码范围 OB52 打开期间 MMPV 开帐 (下篇见)

UE5 UE4 修复GPU驱动程序崩溃

原贴链接:https://mp.weixin.qq.com/s/e5l9XtfwEFWgwhHi1b2idg UE5 UE4在处理含有大量图形的项目时,你有可能会遇到GPU崩溃 可以通过修改注册表,修复崩溃。 GPU崩溃情况概述 UE5 UE4在处理含有大量图形的项目时,你有可能会遇到G…

3d云渲染平台哪个好?如何挑选好的云渲染平台?

3D渲染耗时耗力,很多CG从业者都会转向云渲染平台以提高效率和质量,降低成本。云渲染能让用户通过网络上传项目,借助平台提供的强大渲染集群完成渲染,而无需购买设备,所以选择一个好的云渲染平台非常重要。那么哪个云渲…

【复习】人工智能 第 8 章 人工神经网络及其应用

因为计算牵扯到导数,所以这章难的部分不会考太难。 人工神经网络是对人脑或生物神经网络若干基本特性的抽象和模拟。 深度学习是神经网络的发展。 人工智能曾经历过很长一段时间的停滞不前。 浩瀚的宇宙中,也许只有包含数千忆颗星球的银河系的复杂性能够…

HTML音乐播放器带歌词跟随效果源码附注释

音乐播放器效果截图 <!doctype html><!--声明html版本编写指令 H5--> <html><head><!--声明页面编码 uft-8 国际编码--><meta charset

Open CASCADE学习|非线性方程组

非线性方程组是一组包含非线性数学表达式的方程&#xff0c;即方程中含有未知数的非线性项。解这类方程组通常比解线性方程组更为复杂和困难。 非线性方程组在很多领域都有应用&#xff0c;例如物理学、工程学、经济学等。解决非线性方程组的方法有很多种&#xff0c;包括数值…

在Linux上搭建Maven仓库

目录 一、下载安装包二、安装maven三、修改配置文件settings.xml四、配置环境变量五、测试maven是否可用 一、下载安装包 我在这里为大家准备好了apache-maven-3.5.0-bin.tar.gz&#xff0c;百度网盘下载链接如下&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1bGun…

已解决:UnicodeDecodeError: ‘gb2312‘ codec can‘t decode byte 0xe5 in position 1

起因 python 读文件报错。这个报错不是来自open而是read函数&#xff08;请看最后部分&#xff09;。 原因&#xff1a;文件编码不一致。 比如文件本身编码为 gb2312&#xff0c;而 python默认以 utf-8 编码打开&#xff0c;报错。 解决 初级&#xff1a;以通用的 utf-8 编码…

【Spring Boot】SpringBoot maven 项目创建图文教程

创建一个Spring Boot项目并使用Maven进行构建是一项相对简单的任务。以下是使用IntelliJ IDEA创建Spring Boot Maven项目的详细教程&#xff1a; 步骤 1&#xff1a;安装 IntelliJ IDEA 确保你已经安装了最新版本的 IntelliJ IDEA。你可以从官方网站下载并安装。 步骤 2&am…

Python教程(21)——面向对象编程的三大特性

面向对象三大特性 封装继承多态 在Python中&#xff0c;面向对象编程是一种核心的编程思想。Python被称为“一切皆对象”的语言&#xff0c;因为在Python中&#xff0c;几乎所有的数据都被视为对象。这包括数字、字符串、列表、函数等基本类型&#xff0c;还有自定义的类和对象…

安卓(雷电)模拟器清除屏幕密码

1、设置磁盘可写 启动模拟器&#xff0c;然后在模拟器的设置界面&#xff0c;设置磁盘共享为可写入&#xff0c;重启模拟器&#xff0c;如下图&#xff1a; 2、找到模拟器目录 返回桌面&#xff0c;右键模拟器图标&#xff0c;打开文件所在目录&#xff0c;如下图&#xff1a…

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

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Spring Cloud》。&#x1f3af;&#x1f3af; &am…

【2024系统架构设计】 系统架构设计师第二版-面向服务架构设计理论与实践

目录 一 概述 二 SOA的参考架构 三 SOA主要协议和规范 四 SOA设计标准和原则 五 SOA的设计模式 六 SOA的构建和实施 ​

【前端】前后端的网络通信基础操作(原生ajax, axios, fetch)

概述 前后端网络请求工具 原生ajaxfetch apiaxios GET和POST请求 get只能发纯文本 post可以发不同类型的数据&#xff0c;要设置请求头&#xff0c;需要告诉服务器一些额外信息 测试服务器地址 有一些公共的测试 API 可供学习和测试用途。这些 API 允许你发送 HTTP 请求…

浏览器不支持 css 中 :not 表达式的解决方法

问题 使用 :not 表达式的样式在不同浏览器中存在不生效的问题。 原因 不生效是因为浏览器版本较低所导致的。&#xff08;更多详细信息请看&#xff1a;MDN&#xff09; 解决方法 初始写法&#xff1a; .input-group:not(.user-name, .user-passwork){width: auto; }改成…

基于jsp的在线求职招聘信息系统 设计与实现

当前企业求职招聘的方式更多是通过传统的线下招聘会或职业介绍所来实现的&#xff0c;其不但受众具有很大的局限性&#xff0c;而且往往不可能在短时间内招聘的需要的人才。而互联网的普及为企业求职招聘的方式带来了翻天覆地的改变。通过互联网将招聘信息进行发布可以在短时间…

(1)(1.13) SiK无线电高级配置(五)

文章目录 前言 10 可用频率范围 11 DUTY_CYCLE 设置 12 低延迟模式 13 先听后说 (LBT) 14 升级无线电固件 15 MAVLink协议说明 前言 本文提供 SiK 遥测无线电(SiK Telemetry Radio)的高级配置信息。它面向"高级用户"和希望更好地了解无线电如何运行的用户。 1…

Web缓存代理

目录 一.Web缓存代理 配置Nginx 缓存代理&#xff1a; 修改web服务器的配置文件&#xff1a; 修改192.168.233.10代理服务器的配置文件&#xff1a; 访问页面看看&#xff1a; 对于一些实时性要求非常高的页面或数据来说&#xff0c;就不应该去设置缓存&#xff0c;下面来…

STL-vector

目录 1.vector的介绍及使用 1.1 vector的介绍 1.2 vector的使用 1.2.1 vector的定义 1.2.2 vector iterator 的使用 1.2.3 vector 空间增长问题 1.2.3 vector 增删查改 1.2.4 vector 迭代器失效问题。&#xff08;重点&#xff09; 1. 会引起其底层空间改变的操作&#x…

C++:多态究竟是什么?为何能成为面向对象的重要手段之一?

C&#xff1a;多态究竟是什么&#xff1f;为何能成为面向对象的重要手段之一&#xff1f; 前言一、多态的概念二、多态的定义及实现2.1 多态的构成条件2. 2 虚函数2.3 虚函数的重写2.3.1 虚函数重写的例外1&#xff1a;协变(基类与派生类虚函数返回值类型不同)2.3.2 虚函数重写…