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

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

news 2026/2/10 12:11:58

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

首先打开看打包后的 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

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/11/9 1:27:18

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2026/2/1 2:49:30

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2026/2/4 17:33:27

深入理解 React 样式方案

React 的样式方案较多，在应用开发初期，开发者需要根据项目业务具体情况选择对应样式方案。React 样式方案主要有： 1. 内联样式 2. module css 3. css in js 4. tailwind css 这些方案中，均有各自的优势和缺点。 1. 方案优劣势 1. 内联样式: 简单直观，适合动态样式和…...

编程新知 2025/11/1 6:38:03

中科院1区顶刊|IF14+：多组学MR联合单细胞时空分析，锁定心血管代谢疾病的免疫治疗新靶点

中科院1区顶刊|IF14&#xff1a;多组学MR联合单细胞时空分析&#xff0c;锁定心血管代谢疾病的免疫治疗新靶点 当下&#xff0c;免疫与代谢性疾病的关联研究已成为生命科学领域的前沿热点。随着研究的深入&#xff0c;我们愈发清晰地认识到免疫系统与代谢系统之间存在着极为复…...

编程新知 2026/2/6 1:02:50

代理服务器-LVS的3种模式与调度算法

作者介绍&#xff1a;简历上没有一个精通的运维工程师。请点击上方的蓝色《运维小路》关注我&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 我们上一章介绍了Web服务器&#xff0c;其中以Nginx为主&#xff0c;本章我们来讲解几个代理软件&#xff1a…...

编程新知 2026/1/24 17:58:05

Linux系统：进程间通信-匿名与命名管道

本节重点 匿名管道的概念与原理匿名管道的创建命名管道的概念与原理命名管道的创建两者的差异与联系命名管道实现EchoServer 一、管道 管道&#xff08;Pipe&#xff09;是一种进程间通信&#xff08;IPC, Inter-Process Communication&#xff09;机制&#xff0c;用于在不…...

编程新知 2026/1/28 9:19:17