当前位置: 首页 > 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; -针对性强&#…...

别再瞎调参了!HuggingFace Trainer微调BERT/ViT的保姆级避坑指南(附ArcFace实战代码)

HuggingFace Trainer微调实战&#xff1a;从参数陷阱到模型优化的深度拆解 当你第5次看到验证集准确率在0.85附近震荡不前&#xff0c;而训练损失仍在持续下降时&#xff0c;是否开始怀疑自己选择的优化器、学习率或损失函数&#xff1f;这不是个例——超过60%的NLP工程师在使用…...

恩雅吉他琴颈变形维修保养指南,正规维修机构实力评测

琴颈是吉他手感的 “灵魂”&#xff0c;恩雅吉他的琴颈采用了专属的 BT 接柄技术&#xff0c;搭配碳纤维加固钢筋&#xff0c;在出厂时就调试到了最佳的演奏状态。但日常存放中&#xff0c;温湿度剧变、长期不规范上弦、意外磕碰&#xff0c;都很容易导致琴颈变形&#xff0c;出…...

OpenClaw更新指南:Qwen3-32B镜像的版本迁移与兼容性处理

OpenClaw更新指南&#xff1a;Qwen3-32B镜像的版本迁移与兼容性处理 1. 为什么需要关注版本迁移问题 上周我的OpenClaw自动化流程突然集体罢工——定时发布的文章卡在草稿生成阶段&#xff0c;文件整理机器人把PDF和图片混在一起&#xff0c;连最简单的会议纪要提取都开始输出…...

保姆级教程:用Zephyr RTOS 3.x和nRF52832开发板,5分钟跑通你的第一个BLE心率监测应用

从零构建基于Zephyr RTOS的BLE心率监测系统&#xff1a;nRF52832开发实战指南 在物联网和可穿戴设备爆发的时代&#xff0c;低功耗蓝牙&#xff08;BLE&#xff09;技术已成为连接智能设备的重要纽带。对于嵌入式开发者而言&#xff0c;掌握BLE开发意味着打开了通往智能硬件世界…...

PC-DMIS | 四种最佳拟合算法在精密测量中的实战解析

1. 最佳拟合算法在精密测量中的核心作用 精密测量是现代制造业的基石&#xff0c;而最佳拟合算法则是确保测量精度的关键工具。想象一下&#xff0c;你手里有一把游标卡尺&#xff0c;每次测量都能得到完全一致的数据&#xff0c;但如果你不知道如何正确处理这些数据&#xff0…...

ai辅助开发:让快马智能生成win11安装openclaw的交互式诊断助手

最近在折腾Win11系统上安装OpenClaw这个工具时&#xff0c;发现手动安装过程特别容易踩坑。从依赖版本冲突到权限问题&#xff0c;稍不注意就会卡住。后来尝试用InsCode(快马)平台的AI辅助功能&#xff0c;意外发现它能生成一个智能安装助手&#xff0c;把整个流程变得特别顺畅…...

OpenClaw技能开发:为千问3.5-9B扩展自定义功能

OpenClaw技能开发&#xff1a;为千问3.5-9B扩展自定义功能 1. 为什么需要自定义技能&#xff1f; 去年冬天&#xff0c;我接手了一个重复性极高的数据整理工作——每天需要从十几个不同格式的Excel文件中提取特定字段&#xff0c;合并后生成日报。当我第三次在凌晨两点对着屏…...

专业的品牌策划企业

在竞争激烈的商业世界中&#xff0c;品牌是企业脱颖而出的关键。专业的品牌策划企业能够为企业量身定制品牌战略&#xff0c;助力企业在市场中占据一席之地。今天&#xff0c;我们就来深入了解一家在品牌策划领域颇具影响力的企业——湖南相传品牌设计有限公司&#xff0c;简称…...

3步解锁视频自由:B站m4s缓存转MP4全攻略

3步解锁视频自由&#xff1a;B站m4s缓存转MP4全攻略 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾遇到这样的困境&#xff1a;辛苦缓存…...

基于Vue的社区老年人健康管理与服务预约网站[vue]-计算机毕业设计源码+LW文档

摘要&#xff1a;随着人口老龄化的加剧&#xff0c;社区老年人健康管理与服务预约的需求日益增长。为了提高社区老年人健康管理的效率和服务质量&#xff0c;本文设计并实现了一个基于Vue的社区老年人健康管理与服务预约网站。文章详细阐述了系统的开发背景、相关技术、需求分析…...