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.hqwc.cn/news/336027.html

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

相关文章

Spring+Vue实战项目环境准备跑通程序

SpringVue 源项目 后端: 首先在GitHub上克隆项目到本地(zip包下载/sourcetree拉取/gitbash克隆)。 https://github.com/songboriceman/doubao_community_backend 然后下载Lombok安装到你的IDE(eclipse)。 https://p…

[AutoSar]基础部分 RTE 04 数据类型的定义及使用

目录 关键词平台说明一、数据类型分类二、Adt三、Idt四、Base 数据类型五、units六、compu methods七、data constraint 关键词 嵌入式、C语言、autosar、Rte 平台说明 项目ValueOSautosar OSautosar厂商vector芯片厂商TI编程语言C,C编译器HighTec (GCC) 一、数据…

Linux 内核如何根据设备树文件来匹配内核

一. 简介 上一篇文章学习了 Linux内核如何确定是否支持此设备,如果支持,设备就会启动 Linux 内核。 文章地址如下: 设备树根节点下的compatile属性的作用-CSDN博客 本文继上面文章的学习。这里简单看一下, Linux 内核是如何根…

vmware虚拟机内存异常占用问题一例

关键词 vmware esxi、hypervisor虚拟化平台内存模式 Guest virtual memory 一、问题现象 业务一台vmware虚拟机出现内存使用率告警,运维人员登录系统检查内存确实高水位状态 检查各进程使用内存不高,合计内存总数与使用率占用情况明显不匹配&#xf…

大漠插件7.2353

工具名称:大漠插件7.2353 更新时间2023-12-29更新内容/v7.23531. FindPicSim优化,防止有些时候会找不到图2. 增加接口TerminateProcessTree3. 解决AsmCall 模式6在部分WIN11下无法正常生效的BUG/ 工具简介:大漠 综合 插件 (dm.dll)采用vc6.0编写,识别速度超级快&…

某查查请求头参数加密分析(含JS加密算法与Python爬虫源码)

文章目录 1. 写在前面2. 请求分析3. 断点分析4. 扣加密JS5. Python爬虫代码实现 【作者主页】:吴秋霖 【作者介绍】:Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作! 【作者推荐】&#xff…

TypeScript进阶(一)深入理解类和接口

✨ 专栏介绍 TypeScript是一种由微软开发的开源编程语言,它是JavaScript的超集,意味着任何有效的JavaScript代码都是有效的TypeScript代码。TypeScript通过添加静态类型和其他特性来增强JavaScript,使其更适合大型项目和团队开发。 在TypeS…

Cypress.io:快速简单可靠的浏览器测试工具 | 开源日报 No.142

cypress-io/cypress Stars: 45.5k License: MIT Cypress.io 是一个快速、简单和可靠的浏览器测试工具,可以用于任何在浏览器中运行的内容。它支持 Mac、Linux 和 Windows 系统,并提供了安装指南。 hrvach/deskhop Stars: 4.1k License: GPL-3.0 DeskH…

Slam激光雷达

概念 SLAM,全称为Simultaneous Localization and Mapping(同时定位与地图构建),是一种技术,它允许机器人或自动驾驶系统在未知环境中进行自我定位并构建环境地图。在SLAM技术中,激光雷达是一个关键的传感器。 激光雷达通过发射激光束并测量反射回来的时间来获取周围环境…

机器视觉在OCR字符检测的应用

在产品质量 检测过程中,对于字符、条码等标识信息的识别、读取、检测是非常重要的一部分,比如在食品饮料包装检测中,生产日期 、保质期 、生产批号 、条码等字符信息是产品管理和追溯必不可缺的,因此利用机器视觉技术进行OCR字符采…

VSCode C/C++(gdb)调试指南

1、安装插件 2、F5开启调试 左侧侧边栏->确保打开回调栈 右键函数栈->查看反汇编 3、打印寄存器、函数反汇编等 命令: 查看main反汇编 -exec disassemble /m main 查看寄存器 -exec info r 打印某个变量 -exec print s 或者 --s 打印寄存器,如p…

基于STM32F407的OV7670数字摄像头视频采集系统设计

基于STM32F407的OV7670数字摄像头视频采集系统是一个常见的嵌入式系统设计项目。在本文中,我们将介绍如何利用STM32F407微控制器和OV7670摄像头实现视频采集系统,并提供相应的代码示例。 1. 系统概述 OV7670是一款低成本的数字摄像头模块,具…