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

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

第一种解决办法:

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

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

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

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

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

相关文章

【每日一题】 2024年1月汇编

🔥博客主页: A_SHOWY🎥系列专栏:力扣刷题总结录 数据结构 云计算 数字图像处理 力扣每日一题_ 【1.4】2397.被列覆盖的最多行数 2397. 被列覆盖的最多行数https://leetcode.cn/problems/maximum-rows-covered-by-columns/ 这…

哪个牌子的头戴式耳机好?推荐性价比高的头戴式耳机品牌

随着科技的不断发展,耳机市场也呈现出百花齐放的态势,从高端的奢侈品牌到亲民的平价品牌,各种款式、功能的耳机层出不穷,而头戴式耳机作为其中的一员,凭借其优秀的音质和降噪功能,受到了广大用户的喜爱&…

ArrayList在添加元素时报错java.lang.ArrayIndexOutOfBoundException

一、添加单个元素数组越界分析 add源码如下 public boolean add(E e) {ensureCapacityInternal(size 1); // Increments modCount!!elementData[size] e;return true; } size字段的定义 The size of the ArrayList (the number of elements it contains). ArrayList的大…

雷达DoA估计的跨行业应用--麦克风阵列声源定位(Matlab仿真)

一、概述 麦克风阵列: 麦克风阵列是由一定数目的声学传感器(麦克风)按照一定规则排列的多麦克风系统,而基于麦克风阵列的声源定位是指用麦克风拾取声音信号,通过对麦克风阵列的各路输出信号进行分析和处理,…

力扣hot100 跳跃游戏 贪心

Problem: 55. 跳跃游戏 文章目录 思路复杂度Code 思路 👨‍🏫 参考 挨着跳,记录最远能到达的地方 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( 1 ) O(1) O(1) Code class Solution {public boolean canJump(int[] nums)…

7 STL

1、STL简介 1.1基本概念 可复用利用的东西! 面向对象和泛型编程(模板)的 目的->提升复用性 为了建立数据结构和算法的一套标准->STL横空出世 STL(Standard Template Liberary)标准模板库广义分:容器、算法、迭代器容器…

lwIP 初探(第一节)

一、TCP/IP 协议栈架构 网络协议有很多,如 MQTT、TCP、UDP、IP 等协议,这些协议组成了 TCP/IP 协议栈, 同时,这些协议具有层次性,它们分布在应用层,传输层和网络层。TCP/IP 协议栈的分层结 构和网络协议得…

百无聊赖之JavaEE从入门到放弃(十五)包装类

目录 一.包装类概念 二.自动装箱和拆箱 三.包装类的缓存问题 一.包装类概念 基本数据类型的包装类 我们前面学习的八种基本数据类型并不是对象,为了将基本类型数据和对象之间实现互 相转化,Java 为每一个基本数据类型提供了相应的包装类。 Java 是…

八斗学习笔记

1 初始环境安装 Anaconda安装(一款可以同时创建跟管理多个python环境的软件) https://blog.csdn.net/run_success/article/details/134656460 Anaconda创建一个新python环境(安装人工智能常用的第三方python包,如:tensorflow、keras、pytorch) https://…

12nm工艺,2.5GHz频率,低功耗Cortex-A72处理器培训

“ 12nm工艺,2.5GHz频率,低功耗Cortex-A72处理器培训” 本项目是真实项目实战培训,低功耗UPF设计,后端参数如下: 工艺:12nm 频率:2.5GHz 资源:2000_0000 instances 为了满足更多…

中科大计网学习记录笔记(二):网络核心

前言: 学习视频:中科大郑烇、杨坚全套《计算机网络(自顶向下方法 第7版,James F.Kurose,Keith W.Ross)》课程 该视频是B站非常著名的计网学习视频,但相信很多朋友和我一样在听完前面的部分发现信…

科技云报道:云原生PaaS,如何让金融业数字化开出“繁花”?

科技云报道原创。 在中国金融业数字化转型的历史长卷中,过去十年无疑是一部磅礴的史诗。 2017年,南京银行第一次将传统线下金融业务搬到了线上。那一年,它的互联网金融信贷业务实现了过去10年的业务总额。 2021年,富滇银行通过…

Parrot系统下ROS1试用CoCubeSim

Ubuntu 22.04安装和使用ROS1可行吗_ubuntu22.04安装ros1-CSDN博客 Parrot系统 如果你还不了解这个系统,如下文字就不用接着看了。 为何使用 为何更好的应用各类互联网信息,仅此而已。 开发利器 终端 ROS1和ROS2支持所有操作系统,支持的硬件…

【金蝶BI方案】用一张报表,分析生产完成情况

当老板问生产完成地怎样?难道还能拿出一叠报表让老板逐个细看?奥威-金蝶BI方案只用一张BI数据可视化报表就把整个生产完成情况给讲明白了。甚至还能满足老板想从不同角度进行分析的需求。 奥威-金蝶BI方案-BI生产完成情况报表 这张报表总结计算了生产合…

【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">测…

微服务中间件 RabbitMq学习

1、为什么需要Mq 例如在用户注册业务中&#xff0c;用户注册成功后 需要发注册邮件和注册短信&#xff0c;传统的做法有两种 1.串行的方式&#xff1b;2.并行的方式 &#xff1b; 假设三个业务节点分别使用50ms&#xff0c;串行方式使用时间150ms&#xff0c;并行使用时间10…

如何编写具有完备性的测试用例 ? 具体思路是什么 ? 全套解决方案打包呈现给你 。

设计测试用例应该算是测试人员最为主要的工作之一 &#xff0c;好的测试用例往往具有覆盖性强 &#xff0c;扩展性高以及复用性好等特点 。该如何设计出好的测试用例 &#xff1f;是我们每一位测试人员需要重点思考的问题 &#xff0c;下面是我对设计测试用例设计的思考 &#…

代码随想录 Leetcode40.组合总和 II

题目&#xff1a; 代码&#xff08;首刷看解析 2024年2月1日&#xff09;&#xff1a; class Solution { public:vector<vector<int>> res;vector<int> path;void backtracking(vector<int>& candidates, int target, int startIndex, vector<…

opencv#41 轮廓检测

轮廓概念介绍 通常我们使用二值化的图像进行轮廓检测&#xff0c;对轮廓以外到内进行数字命名&#xff0c;如下图&#xff0c;最外面的轮廓命名为0&#xff0c;向内部进行扩展&#xff0c;遇到黑色白色相交区域&#xff0c;就是一个新的轮廓&#xff0c;然后依次对轮廓进行编号…

玛格全屋定制携手君子签,实现业务信息、流程、合同全面数字化

中国定制家居领导品牌——玛格全屋定制携手君子签&#xff0c;部署玛格业务系统&#xff0c;将电子签章系统与供应链上下游业务合同签署场景融合&#xff0c;通过无纸化、电子化的签署环境&#xff0c;打造业务“线上审批、签署、归档”闭环&#xff0c;助推业务减负提效。 电…