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

解决vite打包只生成了一个css和js文件问题

文章目录

  • 1. 打包遇到的问题
  • 2. 问题原因及修改
  • 3. 调整后再次打包🆗

1. 打包遇到的问题

今天整了一个项目,试了下打包,发下打包后只生成了一个css文件,和一个js文件
这样肯定是不行的,因为这样这个文件的包大小很大,第一次访问会导致白屏问题

问题:vite打包后,只生成了一个css和js文件问题

在这里插入图片描述

2. 问题原因及修改

原因是因为这种写法是路由懒加载(官方解释)

component: () =>  import('../views/login/index.vue');

我看了我的页面路由代码,果然是这样引入的

import Layout from "@/layout/index.vue";
import Login from "@/views/login/index.vue";const routes: Array<RouteRecordRaw> = [{path: "/",name: "root",component: Layout ,redirect: { name: "home" },children: [{path: "login",name: "login",component: Login,meta: {title: "登录"}},]}
]

改成 import 方式就行了

const routes: Array<RouteRecordRaw> = [{path: "/",name: "root",component: () => import('@/layout/index.vue'),redirect: { name: "home" },children: [{path: "login",name: "login",component: () => import('@/views/login/index.vue'),meta: {title: "登录"}},]}
]

3. 调整后再次打包🆗

已经根据页面分js和css了

在这里插入图片描述

相关文章:

解决vite打包只生成了一个css和js文件问题

文章目录 1. 打包遇到的问题2. 问题原因及修改3. 调整后再次打包&#x1f197; 1. 打包遇到的问题 今天整了一个项目&#xff0c;试了下打包&#xff0c;发下打包后只生成了一个css文件&#xff0c;和一个js文件&#xff0c; 这样肯定是不行的&#xff0c;因为这样这个文件的包…...

数据访问层设计_4.灵活运用XML Schema

1.XML Schema XML Schema用来描述XML文档合法结构、内容和限制。XML Schema由XML1.0自描述&#xff0c;并且使用了命名空间&#xff0c;有丰富的内嵌数据类型及其强大的数据结构定义功能&#xff0c;充分地改造了并且极大地扩展了DTDs&#xff08;传统描述XML文档结构和内容限…...

【Linux安全】Firewalld防火墙基础

目录 一、Firewalld概述 二、Firewalld和iptables的关系 三、Firewalld网络区域 1、firewalld防火墙预定义了9个区域: 2、firewalld 数据包处理原则 3、firewalld数据处理流程 4、firewalld检查数据包的源地址的规则 四、Firewalld防火墙的配置方法 1、firewalld 命令…...

先进制造aps专题八 基于ai大模型的ai超级应用,ai生管

目前正在研发的面向消费者的ai超级应用有ai文员&#xff0c;ai教师&#xff0c;ai家教&#xff0c;ai护士&#xff0c;ai翻译 而ai生管无疑是面向制造业的ai超级应用 从商业角度来说&#xff0c;ai生管&#xff0c;必然是aps公司必然要研发的ai超级应用...

Textual for Mac:轻量级IRC客户端

在寻找一款高效、轻量级的IRC客户端时&#xff0c;Textual for Mac无疑是你的不二之选。它集成了众多现代技术&#xff0c;如本机IPv6、最新的IRCv3规范&#xff0c;以及客户端证书身份验证&#xff0c;让你的聊天体验更加顺畅和安全。 Textual for Mac v7.2.2免激活版下载 Tex…...

Facebook:连接世界,畅游社交之旅

作为全球最大的社交平台之一&#xff0c;Facebook不仅仅是一个网站&#xff0c;更是一个连接世界的桥梁&#xff0c;让人们可以轻松地与全球各地的朋友、家人和同事保持联系&#xff0c;分享生活、交流想法&#xff0c;畅游社交的无边界之旅。本文将带领读者探索Facebook的魅力…...

部署PIM-SM

拓扑图 配置 使能组播路由 配置OSPF 组播路由器接口配置pim-sm 连接组成员的接口使能igmp pim路由器上配置静态RP sysname AR1 # multicast routing-enable # interface GigabitEthernet0/0/0ip address 10.1.12.1 255.255.255.0 pim sm # interface GigabitEthernet0/0/…...

一分钟揭秘面试官真实意图,稳拿offer的面试秘诀!

想要在面试中脱颖而出&#xff0c;顺利获得心仪的offer吗&#xff1f;那么&#xff0c;你需要了解面试官背后的潜台词。通过解析这些潜台词&#xff0c;你将能更准确地把握面试官的期望&#xff0c;并给出他们最喜欢的回答。下面&#xff0c;就让我们一起揭开这层神秘的面纱&am…...

【源码】2024心悦搜剧源码百万级网盘资源

1、一键转存他人链接&#xff1a;就是将别人的分享链接转为你自己的 2、转存心悦搜剧资源&#xff1a;就是将心悦搜剧平台上的所有资源都转成你自己的 3、每日自动更新&#xff1a;自动转存每天的资源并入库 前端uin-app&#xff0c;后端PHP&#xff0c;兼容微信小程序...

燃数科技前端25-40K*14薪一面超简单,下周二面啦

​​​​​​​ 文章末尾扫描二维码领取地址 一面 1、自我介绍 2、低代码如何设计的 3、react路由原理 4、react生命周期 5、什么是回调地狱&#xff0c;如何解决 6、jwt和session有什么区别 7、js文件相互引用有什么问题&#xff1f;如何解决 8、一个很大的json文件…...

读人工智能时代与人类未来笔记14_管控人工智能

1. 管控人工智能 1.1. 历史上的战场进一步推进到与数字网络相连的所有地方 1.2. 数字程序现在控制着一个由众多实体系统构成的庞大且仍在不断增长的领域&#xff0c;而且越来越多的此类系统已实现网络化 1.2.1. 在某些情况下甚至连门锁和冰箱都实现了网络化 1.2.2. 这催生出…...

高效并发编程:Java阻塞队列深度解析与最佳实践

1.阻塞队列的基本概念与应用场景 1.1 阻塞队列的定义 阻塞队列&#xff08;BlockingQueue&#xff09;是Java并发包中的一个接口&#xff0c;它支持两个附加操作&#xff1a;当队列为空时&#xff0c;获取元素的线程会等待队列变为非空&#xff1b;当队列满时&#xff0c;存储…...

会话机制:Session

1、什么是会话&#xff1a; 会话对应的英语单词&#xff1a;session 用户打开浏览器&#xff0c;进行一系列操作&#xff0c;然后最终将浏览器关闭&#xff0c;这个整个过程叫做&#xff1a;一次会话。会话在服务器端也有一个对应的java对象&#xff0c;这个java对象叫做&…...

MySQL中, 自增主键和UUID作为主键有什么区别?

首先我们来看看, 存储自增主键和uuid的数据类型 我们知道, mysql中作为主键的通常是int类型的数据, 这个 数据从第一条记录开始, 从1开始主键往后递增, 例如我有100条数据, 那么根据主键排序后, 里面的记录从上往下一次就是1, 2, 3 ... 100, 但是UUID就不一样了, UUID是根据特殊…...

机器人与AI:结合应用与未来展望

机器人与AI&#xff1a;结合应用与未来展望 引言 机器人与人工智能&#xff08;AI&#xff09;的结合已经成为现代科技发展的重要方向。随着AI技术的不断进步&#xff0c;机器人不仅在工业领域中得到广泛应用&#xff0c;还逐渐渗透到家庭、医疗、服务等各个领域。本文将探讨…...

PyTorch学习笔记:新冠肺炎X光分类

前言 目的是要了解pytorch如何完成模型训练 https://github.com/TingsongYu/PyTorch-Tutorial-2nd参考的学习笔记 数据准备 由于本案例目的是pytorch流程学习&#xff0c;为了简化学习过程&#xff0c;数据仅选择了4张图片&#xff0c;分为2类&#xff0c;正常与新冠&#xf…...

【Python】 XGBoost模型的使用案例及原理解析

原谅把你带走的雨天 在渐渐模糊的窗前 每个人最后都要说再见 原谅被你带走的永远 微笑着容易过一天 也许是我已经 老了一点 那些日子你会不会舍不得 思念就像关不紧的门 空气里有幸福的灰尘 否则为何闭上眼睛的时候 又全都想起了 谁都别说 让我一个人躲一躲 你的承诺 我竟然没怀…...

Java中print,println,printf的功能以及区别

在Java中&#xff0c;System.out.print, System.out.println, 和 System.out.printf 都是用于在控制台输出的方法&#xff0c;但它们在使用和功能上有所不同。 System.out.print: * 功能&#xff1a;将指定的内容输出到控制台&#xff0c;但不换行。 * 示例&#xff1a;Sy…...

vue3+electron+typescript 项目安装、打包、多平台踩坑记录

环境说明 这里的测试如果没有其他特别说明的&#xff0c;就是在win10/i7环境&#xff0c;64位 创建项目 vite官方是直接支持创建electron项目的&#xff0c;所以&#xff0c;这里就简单很多了。我们已经不需要向开始那样自己去慢慢搭建 yarn create vite这里使用yarn创建&a…...

实际案例分析

实际案例分析 一、数据准备与特征工程 1.1数据收集 在实际案例分析中&#xff0c;首先需要收集相关数据。数据来源可以包括公开数据集、企业内部数据、互联网爬虫抓取等。为了保证数据的质量和准确性&#xff0c;数据收集过程中需遵循以下原则&#xff1a; -针对性强&#…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...