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

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

第一种解决办法:

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

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

方法一虽然解决了问题, 但是很鸡肋,因为动态组件,我不清楚这个组件有多少层级。经过反复查找资料,看到这位大佬写的文章,https://juejin.cn/post/7120148451341860895感觉和自己的问题很像,于是便尝试了一下(如下图):问题得到完美的解决。控制台输出modules,我们不难发现它是一个对象,对应的key就是组件的路径,value就是对应的组件,就算是在生产上运行,后缀也是vue的,所以我们数据库种只需要配置完整的路径,程序便能从modules对象种去取出对应的组件实例。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

chisel之scala 语法

Chisel新手教程之Scala语言(1) Value & variable Value是immutable的,当它被分配一个数据后,无法进行重新分配。用 val 表示。 Variable是mutable的,可以重复赋值。用 var 表示。示例如下: val a …

vue2 el-table新增行内删除行内(两种写法)里面第一个是树组件,第二个是数字组件,第一个数组件只能勾选最后一个节点

第一种 <template><div class"time_table"><div style"margin-bottom: 10px"><el-button click"addRowFn">新增</el-button></div><el-form ref"costForm" :model"formData">&l…

普渡机器人CEO预测2024年服务机器人市场将扩大

原创 | 文 BFT机器人 根据普渡科技有限公司的报告&#xff0c;商用服务机器人在东亚地区的应用比其他地方更为广泛。然而&#xff0c;预计到2024年&#xff0c;全球其他地区也将迎头赶上。这家总部位于中国深圳的公司自豪地宣称&#xff0c;它已经成为中国最大的此类机器人出口…

基于QPSO-LSTM的短期风电负荷MATLAB预测程序

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 参考文献 基于QPSO-LSTM的短期风电负荷预测模型——谭才兴&#xff08;完全复现&#xff09; 程序简介 传统的LSTM神经网络超参数和拓扑结构通常是基于经验和试验确定&#xff0c;但这种方法容易受到人为因…

uniapp中配置开发环境和生产环境

uniapp在开发的时候&#xff0c;可以配置多种环境&#xff0c;用于自动切换IP地址&#xff0c;用HBuilder X直接运行的就是开发环境&#xff0c;用HBuilder X发布出来的&#xff0c;就是生产环境。 1.使用HBuilder X创建原生的uniapp程序 选择vue3 2.什么都不改&#xff0c;就…

【SAR成像】基于RD、CS和ωk算法的合成孔径雷达成像算法原理与实现

基于RD、CS和ωk算法的合成孔径雷达成像算法实现 前言SAR基本概念雷达获取数据的几何关系低斜视角下的回波信号模型 RADARSAT-1主要参数数据预处理数据读取与再封装数据补零 成像算法坐标轴的产生RD算法距离压缩距离徙动矫正方位压缩 CS算法第一次相位相乘 变标后的信号第二次相…

由亚马逊云科技 Graviton4 驱动的全新内存优化型实例 Amazon EC2 实例(R8g),现已开放预览

下一代 Amazon Elastic Compute CloudAmazon EC2) 实例的预览版现已公开 提供。全新的 R8g 实例 搭载新式 Graviton4 处理器&#xff0c;其性价比远超任何现有的内存优化实例。对于要求较高的内存密集型工作负载&#xff0c;R8g 实例是不二之选&#xff1a;大数据分析、高性能数…

热数据存储在HDFS,冷备数据存储于对象存储中

1.场景分析 生产环境均为腾讯云服务器&#xff0c;日志数据计划存储于HDFS中&#xff0c;由于日志数据较大&#xff08;压缩后1T/天&#xff09;&#xff0c;不断扩充云盘成本消耗大。鉴于对象存储的存储成本较为低廉&#xff0c;但是日常频繁使用会产生流量费用。 鉴于此&…

ES6中新增Array.of()函数的用法详解

new Array()方法 ES6为Array增加了of函数用一种明确的含义将一个或多个值转换成数组。因为用new Array()构造数组的时候&#xff0c;是有二意性的。 构造时&#xff0c;传一个参数&#xff0c;实际上是指定数组的长度&#xff0c;表示生成多大的数组。 构造时&#xff0c;传…

(源码版)2024美国大学生数学建模E题财产保险的可持续模型详解思路+具体代码季节性时序预测SARIMA天气预测建模

本篇文章是: 2024美国大学生数学建模E题财产保险的可持续模型详解思路+具体代码季节性时序预测SARIMA天气预测建模的源码版本,包含具体建模代码到生成模型步骤。那么废话不多说直接开始展示建模过程建模: 数据预处理 之前我给大家提供的一年的风暴数据是远远不够的,要做时…

前端excel带样式导出 exceljs 插件的使用

本来用的xlsx和xlsx-style两个插件&#xff0c;过程一步一个坑&#xff0c;到完全能用要消灭好多bug。这时发现了exceljs&#xff0c;真香&#x1f600; 案例 <!DOCTYPE html> <html><head><meta charset"utf-8" /><meta name"view…

iOS图像处理----探索图片解压缩到渲染的全过程以及屏幕卡顿

一&#xff1a;图像成像过程 ①、将需要显示的图像&#xff0c;由CPU和GPU通过总线连接起来&#xff0c;在CPU中输出的位图经总线在合适的时机上传给GPU &#xff0c;GPU拿到位图做相应位图的图层渲染、纹理合成。 ②、将渲染后的结果&#xff0c;存储到帧缓存区&#xff0c;帧…

Linux 驱动开发基础知识——设备树的语法驱动开发基础知识(九)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;Vir2021GKBS &#x1f43c;本文由…

Docker进阶学习笔记-持续更新中

容器数据卷 什么是容器数据卷 docker的理念回顾 将应用和环境打包成一个镜像! 数据﹖如果数据都在容器中,那么我们容器删除,数据就会丢失!需求︰数据可以持久化MySQL,容器删了,删库跑路!需求:MySQL数据可以存储在本地! 容器之间可以有一个数据共享的技术!Docker容器中产生…

阅读欣赏推荐之(一)——纪录片《数学的故事》

寒假是孩子最好的“增值期”&#xff0c;有很多家长选择让孩子“泡在”辅导班&#xff0c;想让孩子弯道超车&#xff0c;但效果往往是不尽人意的。其实&#xff0c;寒假是孩子提高素质、开阔眼界、增加兴趣的黄金时期&#xff0c;特别是学数学有困难的孩子&#xff0c;可以利用…

“量子+材料”!光量子公司PsiQuantum与日本两大巨头强强合作

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 编辑丨慕一 编译/排版丨卉可 琳梦 深度好文&#xff1a;1200字丨10分钟阅读 近日&#xff0c;光量子计算公司PsiQuantum和三菱日联金融集团宣布&#xff0c;双方与三菱化学集团达成项目合作—…

Linux文件编译

目录 一、GCC编译 1.直接编译 2.分步编译 预处理&#xff1a; 编译&#xff1a; 汇编&#xff1a; 链接&#xff1a; 3.多文件编译 4.G 二、Make 1.概述 2.使用步骤 3.makefile创建规则 3.1一个基本规则 3.2两个常用函数 4.示例文件 三、GDB 示例&#xff1a;…

精雕细琢的文档体验:Spring Boot 与 Knife4j 完美交汇

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 精雕细琢的文档体验&#xff1a;Spring Boot 与 Knife4j 完美交汇 前言Knife4j 与 Swagger 的区别1. 特性与优劣势对比&#xff1a;Knife4j&#xff1a;Swagger&#xff1a; 2. 选择 Knife4j 的理由&a…

【Linux】静态库和动态库

动静态库 一、静态库1. 静态库概念2. 制作静态库&#xff08;1&#xff09;朴素方法 --- 不打包&#xff08;2&#xff09;对静态库打包 3. 使用静态库&#xff08;1&#xff09;朴素方法 --- 直接使用&#xff08;2&#xff09;使用打包好的静态库 二、动态库1. 动态库概念2. …

读论文:DiffBIR: Towards Blind Image Restoration with Generative Diffusion Prior

DiffBIR 发表于2023年的ICCV&#xff0c;是一种基于生成扩散先验的盲图像恢复模型。它通过两个阶段的处理来去除图像的退化&#xff0c;并细化图像的细节。DiffBIR 的优势在于提供高质量的图像恢复结果&#xff0c;并且具有灵活的参数设置&#xff0c;可以在保真度和质量之间进…