解决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;安装…

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

项目背景 在信息化、智能化浪潮席卷全球的今天&#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…

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

目录 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;渲染小型场景所需的时间竟然超过了大型…

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…

运维出现的问题 --集成

运维出现的问题 集成 macos 本地打的镜像&#xff0c;推到线上出现 images platform (linux/arm64) does not match the detected解决办法 macos 本地打的镜像&#xff0c;推到线上出现 image’s platform (linux/arm64) does not match the detected WARNING: The requested …

如何使用Android NDK将头像变成“遗像”

看完本文的标题&#xff0c;可能有人要打我。你说黑白的老照片不好吗&#xff1f;非要说什么遗像&#xff0c;我现在就把你变成遗像&#xff01;好了&#xff0c;言归正传。我想大部分人都用过美颜相机或者剪映等软件吧&#xff0c;它们的滤镜功能是如何实现的&#xff0c;有人…

1653jsp在线学习交流平台Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java 在线学习交流平台系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统采用web模式&#xff0c;系统主要采用B/S模式开发。开发环境 为TOMCAT7.0,Myeclipse8.5开发&#x…

AWS安全性身份和合规性之Identity and Access Management(IAM)

通过AWS Identity and Access Management&#xff08;IAM&#xff09;&#xff0c;您可以指定谁或什么能够访问AWS中的服务和资源、集中管理精细权限&#xff0c;并分析访问权限以优化跨AWS的权限。 比如一家软件开发公司需要在AWS上创建多个开发人员账户&#xff0c;并对其进…

[Algorithm][动态规划][路径问题][不同路径][不同路径Ⅱ][珠宝的最高价值]详细讲解

目录 1.不同路径1.题目链接2.算法原理详解3.代码实现 2.不同路径 II1.题目链接2.算法原理详解3.代码实现 3.珠宝的最高价值1.题目链接2.算法原理详解3.代码实现 1.不同路径 1.题目链接 不同路径 2.算法原理详解 思路&#xff1a; 确定状态表示 -> dp[i][j]的含义 走到dp[…

Excel 多行表头的列转行

Excel中A3:F6是带表头的典型表格&#xff0c;但上面多了额外的两行表头&#xff1a; ABCDEF1ActualsActualsPlanPlan2FY20FY21FY20FY213CountryOwner1/1/20201/1/20201/1/20201/1/20204FranceRichard100150801605FranceMartin1201401301406FrancePierre501005080 现在要将典型…