vue3 + vite:打包部署后,动态组件渲染404问题解决

news2024/12/27 1:02:31

问题描述: 当需要渲染动态组件,动态的组件路径配置在数据库中时,如下图,本地运行能正常访问,用vite打包部署后,生产上改路径为404.
在这里插入图片描述
在这里插入图片描述
起初认为是,vite打包后的文件都是.js, 当页面加载后从数据库拿来的路径是.vue, 并且是src/xxx/xxx.vue 这种绝对路径形式的,所以就找不到文件了。

第一种解决办法:

后来经过反复尝试,演化出第一章解决办法(如下图):将每一级的文件夹单独处理成一个变量,前缀../ 和每一级的 /,以及后缀都要在程序中写死,不能写在数据库中,数据库内只配置包名和文件名称即可,这样本地运行以及vite打包部署后,都能够正常的访问文件。
在这里插入图片描述

第二种解决办法(完美解决):

方法一虽然解决了问题, 但是很鸡肋,因为动态组件,我不清楚这个组件有多少层级。经过反复查找资料,看到这位大佬写的文章,

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

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

相关文章

《Pandas 简易速速上手小册》第3章:Pandas 数据清洗基础(2024 最新版)

文章目录 3.1 处理缺失数据3.1.1 基础知识3.1.2 重点案例:客户数据分析3.1.3 拓展案例一:医疗问卷数据处理3.1.4 拓展案例二:零售店库存清单 3.2 数据类型转换3.2.1 基础知识3.2.2 重点案例:商品销售数据分析3.2.3 拓展案例一&…

热仿真中稳态与瞬态的区别

对于热仿真,根据是否随时间变化,可分为稳态(steady)仿真和瞬态(transient)仿真两类。 从数学计算的角度,所谓稳态是指物理量不随时间变化的定常过程,即计算域中所有物理量均满足关系…

华章杂志华章杂志社华章编辑部2023年第11期目录

专题论文 强化人才队伍发展 推动法治唐山建设问题研究 (0003) 李彬 文化论坛《华章》投稿:cn7kantougao163.com 乡村振兴背景下非物质文化遗产传承与发展探究 ——以黔西南州传统蓝染文化为例 (0006) 董天丽;何华杰;韦永吉;王芳琳 思政课视角下高职学生保护和继…

Git系列---远程操作

📙 作者简介 :RO-BERRY 📗 学习方向:致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 📒 日后方向 : 偏向于CPP开发以及大数据方向,欢迎各位关注,谢谢各位的支持 引用 1.理解分布式版本控制…

第九篇【传奇开心果系列】Python的OpenCV技术点案例示例:目标跟踪

传奇开心果短博文系列 系列短博文目录Python的OpenCV技术点案例示例系列 短博文目录前言二、常用的目标跟踪功能、高级功能和增强跟踪技术介绍三、常用的目标跟踪功能示例代码四、OpenCV高级功能示例代码五、OpenCV跟踪目标增强技术示例代码六、归纳总结 系列短博文目录 Pytho…

绝地求生:地铁逃生模式从哪里进入游戏模式的讲解

地铁逃生模式是绝地求生(PUBG)中的一种游戏模式,玩家需要在地铁车厢中寻找武器并战胜其他玩家。如果你还不知道在哪里进入地铁逃生模式,本文闲游盒将为您进行详细的讲解。 进入地铁逃生模式的步骤: 打开绝地求生游戏客…

C++关键词auto详解

顾得泉:个人主页 个人专栏:《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂,年薪百万! 一、小思考 随着我们对于C的不断学习,遇到的程序越来越复杂,程序中用到的类型也越来越复杂…

麒麟V10 mate-indicator进程占用内存过高问题

给客户新划的5台虚拟机,操作系统是麒麟V10,用户反映什么软件都没装系统内存占用就达到80%。 百度了一下是麒麟的bug,内存泄漏。官方分析报告。 解决方法:下载相应rpm包并安装即可解决。 1.确定麒麟版本 cat /etc/*release Ter…

npm淘宝镜像过期解决办法

npm淘宝镜像过期解决办法 因为npm 官方镜像(registry.npmjs.org)在国内访问很慢,我们基本上都会选择切换到国内的一些 npm 镜像(淘宝镜像、腾讯云镜像等)。由于淘宝原来的镜像(registry.npm.taobao.org&am…

肉食食材大数据平台(附源码)

目录 一.需求分析 1.项目背景 2.用户简介 3.术语定义 4.功能概述 二.概要设计 1.概要设计流程图 2.流程图详细说明 三.数据库设计 1.软件名称 2.概念结构设计 2.1电商模块 2.2猪肉今日价格模块 2.3大屏展示模块 2.3.1舆论舆情 2.3.2 省均价模块 2.3.3进出口模块…

Pyecharts绘制多种炫酷气泡图

Pyecharts绘制多种炫酷气泡图 引言 数据可视化是数据分析中不可或缺的一环,而Pyecharts作为一款基于Echarts的Python图表库,提供了丰富的图表类型,其中气泡图是一种常用于展示三维数据的炫酷图表。本文将介绍如何使用Pyecharts绘制多种炫酷…

【CSS】css获取子元素的父元素,即通过子元素选择父元素(使用CSS伪类 :has() :not() )

这里写目录标题 一、:has获取第一个div获取包含 a.active 的 li获取第二个div 二、:not除了类名为active 的 a,其他的a的字体都为18px <div><h1>标题</h1></div><div><ul><li><a href"#" class"active">测…

基于YOLOv8的水下生物检测,多种优化方法---自研注意力BSAM助力涨点(一)

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文主要内容:详细介绍了水下生物检测整个过程&#xff0c;从数据集到训练模型到结果可视化分析&#xff0c;以及如何优化提升检测性能。 &#x1f4a1;&#x1f4a1;&#x1f4a1;加入自研注意力BSAM mAP0.5由原始的0.522提升至0.553…

【AG32VF407】国产MCU+FPGA,更新官方固件解决8Mhz内部晶振不准,Verilog实测7.9Mhz!

视频讲解 [AG32VF407]国产MCUFPGA&#xff0c;更新官方固件解决8Mhz内部晶振不准&#xff0c;Verilog实测7.9Mhz&#xff01; 实验过程 之前出现的双路pll不同频率的测试中&#xff0c;提出了内部晶振输出不准的问题&#xff0c;和官方沟通后得到极大改善&#xff0c;方法如下…

Excel技能——使用条件格式保护数据

1.选中需要保护数据的单元格 2.选择“条件格式”——“新建规则” 3.选择“使用公式确定要设置格式的单元格”——在条件单元格设置格式的位置&#xff0c;写“”——光标选中输入密码的单元格&#xff0c;此处是点击“123”处的单元格——输入“<>”&#xff08;意思是不…

Unity学习之Unity核心(一)2D相关

文章目录 1. 前言2 图片导入概述3 图片设置的六大部分3.1 纹理类型3.1.1 Default3.1.2 Normal Map 法线贴图格式3.1.3 Editor GUI and Legacy GUI3.1.4 Sprite3.1.5 Cursor 自定义光标3.1.6 Cookie 光源剪影格式3.1.7 LightMap光照贴图格式3.1.8 Single Channel 纹理只需要单通…

【Python 元类探秘】之四:深入检查类定义✨

【Python 元类探秘】之四&#xff1a;深入检查类定义 &#x1f50d; 前言 &#x1f389; 在 Python 的编程艺术中&#xff0c;元类&#xff08;Metaclass&#xff09;犹如幕后的导演&#x1f3ac;&#xff0c;悄然塑造着类的本质和行为。这个概念&#xff0c;虽然对于初学者来…

存内计算技术—解决冯·诺依曼瓶颈的AI算力引擎

文章目录 存内计算技术背景CSDN首个存内计算开发者社区硅基光电子技术存内计算提升AI算力知存科技存算一体芯片技术基于存内计算的语音芯片的实现挑战 参考文献 存内计算技术背景 存内计算技术是一种革新性的计算架构&#xff0c;旨在克服传统冯诺依曼架构的瓶颈&#xff0c;并…

家居设计软件的开发框架

家居设计软件的开发框架可以涵盖多个方面&#xff0c;包括图形渲染、用户界面、数据库管理等。以下是一些常用的开发框架和技术&#xff0c;可以用于家居设计软件的开发&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0…

linux解决访问/下载github连接超时或下载慢的问题

问题 我这里是树莓派从github下载资源出现无法连接&#xff0c;连接超时的问题&#xff0c;如下所示解决方式 修改/etc/hosts文件 例&#xff1a; sudo nano /etc/hosts #添加如下 192.30.255.112 github.com git 185.31.16.184 github.global.ssl.fastly.net这里以树莓派为…