当前位置： 首页 > news >正文

[vite] 项目打包后页面空白,配置了base后也不生效

news 文章来源：https://blog.csdn.net/jinwenshuo2007/article/details/132322773 2025/5/22 1:03:06

记录下解决问题的过程和思路

首先打开看打包后的 dist/index.html 文件，和页面上的报错

这里就发现了第一个问题

报错的意思是 index.html中引用的 css文件 和 js文件 找不到

为了解决这个问题，在vite.config.js配置中，增加一项 base:'./'  让文件指向正确的路径 

这个问题在webpage上也存在，道理是一样的，我本来以为这问题到这就解决了

但配置了base后重新打包，页面还是空白，但报错变了，说明刚刚的配置，起了一定作用

网上有说配置路由为history模式的，各位也可以试试，但我这次遇到的问题，和路由没关系

此时看打包后的 dist/index.html 文件、页面上的报错和报错的js文件

报错中说，浏览器它不理解这个'?'的意思，

我打开报错的JS文件，发现了第二个问题

这个js文件其中一行写了两个问号??，这个是ES2020的新语法，例如：a ?? b 

意思是当a的值是undefined或者null 的时候，就返回b 

我猜测这个es2020标准，我测试用的这两款浏览器都不认

  • mac arm chrome 版本 115.0.5790.170（正式版本） (arm64)
  • 360 极速 内核版本78.0.3904.108

此时解决问题的思路有了，查阅vite官方文档，寻找构建配置的兼容性目标，

我决定将目标限制在ES2015

就增加了这个配置，问题完美解决

另外，其实还有个更粗暴的办法

适用于小项目：就是直接配置minify: false ，什么都解决了，这个vite的官方文档里也有提到

这样带来的缺点就是，打包后的文件体积没有压缩到最小

但小项目就无所谓了，也不差那三五MB的

相关文章：

[vite] 项目打包后页面空白,配置了base后也不生效

记录下解决问题的过程和思路 首先打开看打包后的 dist/index.html 文件，和页面上的报错 这里就发现了第一个问题 报错的意思是 index.html中引用的 css文件 和 js文件 找不到 为了解决这个问题，在vite.config.js配置中，增加一项 base:./ …...

编程日记 2023/8/17 10:09:00

springboot整合kafka-笔记

springboot整合kafka-笔记 配置pom.xml 这里我的springboot版本是2.3.8.RELEASE&#xff0c;使用的kafka-mq的版本是2.12 <dependencyManagement><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>s…...

编程日记 2023/8/17 10:07:58

Rust软件外包开发语言的特点

Rust 是一种系统级编程语言&#xff0c;强调性能、安全性和并发性的编程语言&#xff0c;适用于广泛的应用领域&#xff0c;特别是那些需要高度可靠性和高性能的场景。下面和大家分享 Rust 语言的一些主要特点以及适用的场合&#xff0c;希望对大家有所帮助。北京木奇移动技术有…...

编程日记 2023/8/17 10:06:57

Spring Boot业务代码中使用@Transactional事务失效踩坑点总结

1.概述 接着之前我们对Spring AOP以及基于AOP实现事务控制的上文&#xff0c;今天我们来看看平时在项目业务开发中使用声明式事务Transactional的失效场景&#xff0c;并分析其失效原因&#xff0c;从而帮助开发人员尽量避免踩坑。 我们知道 Spring 声明式事务功能提供了极其…...

编程日记 2023/8/17 10:05:55

知识体系总结（九）设计原则、设计模式、分布式、高性能、高可用

文章目录 架构设计为什么要进行技术框架的设计 六大设计原则一、单一职责原则二、开闭原则三、依赖倒置原则四、接口分离原则五、迪米特法则&#xff08;又称最小知道原则&#xff09;六、里氏替换原则案例诠释 常见设计模式构造型单例模式工厂模式简单工厂工厂方法 生成器模式…...

编程日记 2023/8/17 10:04:53

Springboot 集成Beetl模板

一、在启动类下的pom.xml中导入依赖&#xff1a; <!--beetl模板引擎--><dependency><groupId>com.ibeetl</groupId><artifactId>beetl</artifactId><version>2.9.8</version></dependency> 二、 配置 beetl需要的Beetl…...

编程日记 2023/8/17 10:03:52

RabbitMQ查询队列使用情况和消费者详情实现

spring-boot-starter-amqp spring-boot-starter-amqp是Spring Boot框架中与AMQP（高级消息队列协议）相关的自动配置启动器。它提供了使用AMQP进行消息传递和异步通信的功能。 以下是spring-boot-starter-amqp的主要特性和功能： 自动配置：spring-boot-starter-amqp通过自动…...

编程日记 2023/8/17 10:02:51

Spark第二课RDD的详解

1.前言 RDD JAVA中的IO 1.小知识点穿插 1. 装饰者设计模式 装饰者设计模式:本身功能不变,扩展功能. 举例&#xff1a; 数据流的读取 一层一层的包装&#xff0c;进而将功能进行进一步的扩展 2.sleep和wait的区别 本质区别是字体不一样,sleep斜体,wait正常 斜体是静态方法…...

编程日记 2023/8/17 10:01:49

人工智能学习框架—飞桨Paddle人工智能

1.人工智能框架 机器学习的三要素&#xff1a;模型、学习策略、优化算法。 当我们用机器学习来解决一些模式识别任务时&#xff0c;一般的流程包含以下几个步骤&#xff1a; 1.1.浅层学习和深度学习 浅层学习(Shallow Learning)&#xff1a;不涉及特征学习&#xff0c;其特征…...

编程日记 2023/8/17 10:00:48

SElinux 导致 Keepalived 检测脚本无法执行

哈喽大家好&#xff0c;我是咸鱼 今天我们来看一个关于 Keepalived 检测脚本无法执行的问题 一位粉丝后台私信我&#xff0c;说他部署的 keepalived 集群 vrrp_script 模块中的脚本执行失败了&#xff0c;但是手动执行这个脚本却没有任何问题 这个问题也是咸鱼第一次遇到&…...

编程日记 2023/8/17 9:59:47

2022年电赛C题——小车跟随行驶系统——做题记录以及经验分享

前言 自己打算将做过的电赛真题&#xff0c;主要包含控制组的&#xff0c;近几年出现的小车控制题目&#xff0c;自己做过的真题以及在准备电赛期间刷真题出现的问题以及经验分享给大家 这次带来的是22年电赛C题——小车跟随行驶系统&#xff0c;这道题目指定使用的是TI的单片…...

编程日记 2023/8/17 9:58:46

vscode + python

序 参考链接&#xff1a; 【教程】VScode中配置Python运行环境_哔哩哔哩_bilibili Python部分 Python Releases for Windows | Python.org vscode部分 Visual Studio Code - Code Editing. Redefined 一路next&#xff0c;全部勾上&#xff1a; 就可以了&#xff1a; 安装插…...

编程日记 2023/8/17 9:57:45

badgerdb里面的事务

事务的ACID A 原子性&#xff08;Atomicity&#xff09; 多步骤操作&#xff0c;只能是两种状态&#xff0c;要么所有的步骤都成功执行&#xff0c;要么所有的步骤都不执行&#xff0c;举例说明就是小明向小红转账30元的场景&#xff0c;拆分成两个步骤&#xff0c;步骤1&#…...

编程日记 2023/8/17 9:56:43

C# this.Invoke(new Action(() =＞ { /* some code */ }))用法说明

在 C# 中&#xff0c;this.Invoke(new Action(() > { /* some code */ })) 是一种用于在 UI 线程上执行代码的方法&#xff0c;通常用于在后台线程中更新 UI 控件的值或执行其他需要在 UI 线程上执行的操作。 在 Windows Forms 或 WPF 等图形界面应用程序中&#xff0c;UI …...

编程日记 2023/8/17 9:55:42

MongoDB:MySQL,Redis,ES,MongoDB的应用场景

简单明了说明MySQL,ES,MongoDB的各自特点,应用场景,以及MongoDB如何使用的第一章节. 一. SQL与NoSQL SQL被称为结构化查询语言.是传统意义上的数据库,数据之间存在很明确的关联关系,例如主外键关联,这种结构可以确保数据的完整性(数据没有缺失并且正确).但是正因为这种严密的结…...

编程日记 2023/8/17 9:54:40

leetcode每日一题_2682.找出转圈游戏输家

2682.找出转圈游戏输家 题目: n 个朋友在玩游戏。这些朋友坐成一个圈&#xff0c;按 顺时针方向 从 1 到 n 编号。从第 i 个朋友的位置开始顺时针移动 1 步会到达第 (i 1) 个朋友的位置&#xff08;1 < i < n&#xff09;&#xff0c;而从第 n 个朋友的位置开始顺时针移…...

编程日记 2023/8/17 9:53:39

OpenCV之薄板样条插值(ThinPlateSpline)

官方文档&#xff1a;OpenCV: cv::ThinPlateSplineShapeTransformer Class Reference 使用方法&#xff1a; 头文件&#xff1a;#include <opencv2/shape/shape_transformer.hpp> &#xff08;1&#xff09;点匹配 一般根据有多少个样本&#xff08;或者点&#xff09;…...

编程日记 2023/8/17 9:52:37

034_小驰私房菜_[问题复盘] Qcom平台，某些三方相机拍照旋转90度

全网最具价值的Android Camera开发学习系列资料~ 作者：8年Android Camera开发，从Camera app一直做到Hal和驱动~ 欢迎订阅，相信能扩展你的知识面，提升个人能力~ 【一、问题】 某些三方相机，预览正常，拍照旋转90度 【二、问题排查】 1 ） HAL这边Jpeg编码数据在哪个地方…...

编程日记 2023/8/17 9:51:36

【TI-CCS笔记】工程编译配置 bin文件的编译和生成 各种架构的Post-build配置汇总

【TI-CCS笔记】工程编译配置 bin文件的编译和生成 各种架构的Post-build配置汇总 TI编译器分类 在CCS按照目录下 有个名为${CG_TOOL_ROOT}的目录 其下就是当前工程的编译器 存放目录为&#xff1a; C:\ti\ccs1240\ccs\tools\compiler按类型分为五种&#xff1a; ti-cgt-arm…...

编程日记 2023/8/17 9:50:34

深入探索Java中的File类与IO操作：从路径到文件的一切

文章目录 1. File类的作用与构造方法2. File类常用方法&#xff1a;获取、判断和创建2.1 获取功能方法2.2 判断功能方法2.3 创建和删除功能方法2.4 目录的遍历方法 3. 递归&#xff1a;探索更深的层次代码示例&#xff1a;递归遍历文件夹 结论 &#x1f389;欢迎来到Java学习路…...

编程日记 2023/8/17 9:49:33

Python 处理 Excel 表格的 14 个常用操作

目录 1. 安装依赖库 2. 导入库 3. 读取Excel文件 4. 写入Excel文件 5. 创建工作表 6. 访问工作表 7. 读取单元格数据 8. 写入单元格数据 9. 获取行数和列数 10. 过滤数据 11. 排序数据 12. 添加新行 13. 删除行或列 14. 计算汇总统计 总结 无论是数据分析师、财…...

编程日记 2023/8/17 9:48:32

PyQt有哪些主要组件？

这是一个非常强大的跨平台GUI库&#xff0c;可以让你用Python语言创建美观且功能强大的桌面应用程序。让我们先来了解一下它的主要组件。 首先&#xff0c;我们要介绍的是窗口。窗口是PyQt应用程序的基本元素&#xff0c;所有的GUI元素都放置在窗口中。你可以创建主窗口、模态…...

编程日记 2023/8/17 9:47:31

力推C语言必会题目终章（完结篇）

W...Y的主页 &#x1f60a; 代码仓库分享 &#x1f495; 今天是分享C语言必会题目最终章&#xff0c;全部都是硬货&#xff0c;大家都坐好准备开始喽&#xff01;&#xff01;&#xff01; 编写一个函数&#xff0c;计算字符串中含有的不同字符的个数。字符在 ASCII 码范围内…...

编程日记 2023/8/17 9:46:28

CS5263替代停产IT6561连接DP转HDMI音视频转换器ASL 集睿致远CS5263设计电路原理图

ASL集睿致远CS5263是一款DP1.4到HDMI2.0b转换器芯片&#xff0c;设计用于将DP1.4源连接到HDMI2.0b接收器。 CS5263功能特性&#xff1a; DP接口包括4条主通道、辅助通道和HPD信号。接收器支持每通道5.4Gbps&#xff08;HBR2&#xff09;数据速率。DP接收机结合了HDCP1.4和HDCP…...

编程日记 2023/8/17 9:45:27

数据分析 | 随机森林如何确定参数空间的搜索范围

1. 随机森林超参数 极其重要的三个超参数是必须要调整的&#xff0c;一般再加上两到三个其他超参数进行优化即可。 2. 学习曲线确定n_estimators搜索范围 首先导入必要的库&#xff0c;使用sklearn自带的房价预测数据集&#xff1a; import numpy as np import pandas as pd f…...

编程日记 2023/8/17 9:44:26

5G+AI数字化智能工厂建设解决方案PPT

导读&#xff1a;原文《5GAI数字化智能工厂建设解决方案》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。数字化智能工厂定义 智能基础架构协同框架 - 端、边、云、网…...

编程日记 2023/8/17 9:43:25

Windows配置编译ffmpeg +音视频地址

Windows配置MinGW及MinGW-make使用实例 https://blog.csdn.net/Henoiiy/article/details/122550618 ffmpeg安装遇错&#xff1a;nasm/yasm not found or too old. Use --disable-x86asm for a crippled build. https://blog.csdn.net/sayyy/article/details/124337834https://…...

编程日记 2023/8/17 9:42:24

C语言 常用工具型API --------system（）

函数名&#xff1a; system&#xff08;&#xff09; 用 法&#xff1a; int system(char *command); 原理&#xff1a; 加载一个子进程去执行指定的程序&#xff0c;而想Linux命令基本都是一个单独的进程实现的&#xff0c;所以你所掌握的Linux命令越多&#xff0c;该函数功…...

编程日记 2023/8/17 9:41:22

车规级半导体分类(汽车芯片介绍)

车规级半导体&#xff0c;也被称为“汽车芯片”&#xff0c;主要应用于车辆控制装置、车载监控系统和车载电子控制装置等领域。这些半导体器件主要分布在车体控制模块上&#xff0c;以及车载信息娱乐系统方面&#xff0c;包括动力传动综合控制系统、主动安全系统和高级辅助驾驶…...

编程日记 2023/8/17 9:40:21

opencv图像轮廓检测

效果展示&#xff1a; 代码部分&#xff1a; import cv2 import numpy as np img cv2.imread(C:/Users/ibe/Desktop/picture.PNG,cv2.IMREAD_UNCHANGED) # 类型转换 img cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)# 结构元 kernel cv2.getStructuringElement(cv2.MORPH_REC…...

编程日记 2023/8/17 9:39:19