解决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了

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows:iHasher-v0.2安装报错Windows 功能 .NET Framework 3.5

一、情景描述 我们从MSDN下载了镜像文件&#xff0c;一般要验证下载文件的HASH值是否与MSDN上发布的一致&#xff0c;确保传出过程中iso文件没有损坏。 MSDN地址&#xff1a;https://msdn.itellyou.cn/ 我从MSDN下载了Hasher工具&#xff0c;进行校验。 但是&#xff0c;安装…

Marker可以快速且准确地将PDF转换为markdown格式。

Marker Marker可以快速且准确地将PDF转换为markdown格式。 支持多种文档类型&#xff08;针对书籍和科学论文进行了优化&#xff09;支持所有语言移除页眉/页脚/其他杂质格式化表格和代码块提取并保存图像以及markdown将大多数方程转换为latex支持在GPU、CPU或MPS上运行 工作…

智慧社区管理系统:打造便捷、安全、和谐的新型社区生态

项目背景 在信息化、智能化浪潮席卷全球的今天&#xff0c;人们对于生活品质的需求日益提升&#xff0c;期待居住环境能与科技深度融合&#xff0c;实现高效、舒适、安全的生活体验。在此背景下&#xff0c;智慧社区管理系统应运而生&#xff0c;旨在借助现代信息技术手段&…

[机缘参悟-185] - 《道家-水木然人间清醒1》读书笔记 - 真相本质 -8- 认知觉醒 - 逻辑谬误、认知偏差:幸存者偏差

目录 前言&#xff1a; 一、幸存者偏差 二、幸存者偏差在现实中的应用 第一个故事&#xff1a; 第二个故事&#xff1a; 三、生活中的幸存者偏差 四、迷恋成功者经验的原因&#xff1a;鸡汤、幻想、传奇、希望 备注&#xff1a; 前言&#xff1a; 幸存者偏差&#xff0…

从需求角度介绍PasteSpider(K8S平替部署工具适合于任何开发语言)

你是否被K8S的强大而吸引&#xff0c;我相信一部分人是被那复杂的配置和各种专业知识而劝退&#xff0c;应该还有一部分人是因为K8S太吃资源而放手&#xff01; 这里介绍一款平替工具PasteSpider&#xff0c;PasteSpider是一款使用c#编写的linux容器部署工具(使用PasteSpider和…

k8s集群的声明式管理资源

一 声明式管理方法 1 适合于对资源的修改操作&#xff08;陈述式方式修改资源非常不方便&#xff09; 2 声明式资源管理方法依赖于yaml资源配置清单文件对资源进行管理 资源配置清单文件有两种格式&#xff1a;yaml&#xff08;人性化&#xff0c;易读&#xff09;&#xff…

集成构建流程之根文件系统Buidroot

编译流程 单板信息 #---- device/milkv-duos-sd/boardconfig.sh export MV_BOARDmilkv-duos-sd export MV_BOARD_CPUcv1813h export MV_VENDORmilkv export MV_BUILD_ENVmilkvsetup.sh export MV_BOARD_LINKcv1813h_milkv_duos_sd 通用编译脚本&#xff1a;build.sh #---- b…

MySQL 视图(1)

常用视图语句 -- 创建视图 CREATE VIEW t1_view AS SELECT * FROM t1; CREATE VIEW v AS VALUES ROW(1,2);-- 查询视图 SELECT * FROM t1_view;-- 查询视图的相关系统视图 SELECT VIEW_DEFINITION FROM INFORMATION_SCHEMA.VIEWS WHERE TABLE_SCHEMA = test AND TABLE_NAME =…

MATLAB基础应用精讲-【数模应用】调节中介作用分析(附R语言代码实现)

目录 算法原理 什么是调节中介作用分析 中介调节模型 一概念

LLaMA2详解

padding_side llama系列训练和推理都是right padding&#xff1a; 训练&#xff1a;其实只要设置padding mask&#xff0c;那么left/right pad是没有区别的。然而实际上huggingface中某些tokenizer在training的时候必须设成right padding&#xff0c;因为有些tokenizer使用的是…

【智能算法应用】遗传算法求解车间布局优化问题

目录 1.问题背景2.车间布局数学模型3.算法过程4.结果展示5.参考文献6.代码获取 1.问题背景 工厂设施布置的规划一直是工业工程领域不断研究和探索的内容&#xff0c; 其中最具代表性之一的是系统布置设计( system layout planning&#xff0c; SLP) 方法。作为一种经典且有效的…

flink程序本地运行报: A JNI error has occurred和java.lang.NoClassDefFoundError

1.问题描述 在idea中运行flink job程序出现如下错误&#xff1a; Error: A JNI error has occurred, please check your installation and try again Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/flink/api/common/io/FileInputFormat …

接口自动化基础

1、接口自动化测试 接口自动化&#xff1a;使用工具或代码代替人对接口进行测试的技术。 测试目的&#xff1a;防止开发修改代码时引入新的问题。 l测试时机&#xff1a; 开发进行系统测试转测前&#xff0c;可以先进行接口自动化脚本的编写。 开发进行系统测试转测后&…

单片机通信协议(1):SPI简介

关于SPI SPI&#xff08;串行外设接口&#xff09;是板载设备间通信接口之一。它是由摩托罗拉公司&#xff08;飞思卡尔半导体&#xff09;推出的。由于其简单性和通用性&#xff0c;它被纳入各种外围设备中&#xff0c;并与飞利浦I2C总线并列。 SPI的三线或四线信号数量比IIC…

深度学习模型keras第二十二讲:使用KerasCV进行语义分割

1、语义分割的概念 1.1语义分割的定义 语义分割是一种计算机视觉领域的图像分割技术&#xff0c;其目标是将一张图像中的每个像素分配给预定义的类别。 在图像领域&#xff0c;语义指的是对图像意思的理解。语义分割就是按照“语义”给图像上目标类别中的每一点打上一个标签…

Qt代码初识

文章目录 Qt代码初识1. Qt Hello World 程序1.1 使⽤ "按钮" 实现1.1.1 纯代码⽅式实现1.1.2 可视化操作实现 1.2 使⽤ "标签" 实现1.2.1 纯代码⽅式实现1.2.2 可视化操作实现 2. 项⽬⽂件解析2.1 .pro ⽂件解析2.2 widget.h ⽂件解析2.3 main.cpp ⽂件解析…

「云渲染课堂」3dmax渲染影响时间的原因有哪些

在3ds Max使用过程中经验丰富的用户普遍了解&#xff0c;渲染大型场景往往需要消耗更多的时间&#xff0c;尤其是在硬件配置相同的情况下。但有时候&#xff0c;我们可能会遇到一个反直觉的现象&#xff1a;在相同的硬件配置下&#xff0c;渲染小型场景所需的时间竟然超过了大型…

vue的内置组件keep-alive都做了什么

keep-alive我想大家都不陌生&#xff0c;它能在组件切换过程中将状态保留在内存中&#xff0c;防止重复渲染DOM&#xff0c;确保高效渲染时节约性能。 一、Keep-alive 是什么 keep-alive 包裹动态组件时&#xff0c;会缓存不活动的组件实例&#xff0c;而不是销毁它们 keep-a…

Windows安全应急--反隐身术

NO.1 dir命令 首先做个演示&#xff0c;把演示01这个文件夹隐藏起来&#xff0c; 在文件夹上是看不到了&#xff0c; 我们可以使用dir命令查看&#xff0c; NO.2 文件夹选项–显示隐藏 这个是非常常规的了&#xff0c; 这里不做过多介绍 有些隐藏文件很顽固&#xff0c;上面…

IO系列(八) -浅析NIO工作原理

一、简介 现在使用 NIO 的场景越来越多&#xff0c;很多网上的技术框架或多或少的使用 NIO 技术&#xff0c;譬如 Tomcat、Jetty、Netty&#xff0c;学习和掌握 NIO 技术已经不是一个 Java 攻城狮的加分技能&#xff0c;而是一个必备技能。 那什么是 NIO 呢&#xff1f; NIO…