多入口+vite+vue3预渲染方案

如果你的项目要求加载速度要快,我们如果使用传统的vue3+sfc模式去开发,因为只有一个根节点,空白页面加载出来之后js才回去加载组件渲染,这样页面总是有一个短暂的空白。我们这里不讨论服务器端ssr和预渲染方案,仅仅是为了满足比较极端的优化需求,在这种情况下我的这套方案就是一种比较好的解决方案。

1 首先说一下多入口配置

多入口配置也就是说将项目拆分成多个子项目,然后让后通过url跳转关联接起来。这种方案能在大型项目优化方面有一定的积极作用。

vite+vue3多入口配置:

版本信息:

 "vue": "3.3.4" 

"vite": "^5.4.8"

1.1 相关配置

//其他配置build: {rollupOptions: {input: {index: "index.html",login: "login.html",member: "member.html",},
}//其他配置

这里这个index也可以是main是必须的,只是项目启动的入口,但是打包时依然可以和其他文件打包在同一个目录下。

根目录下:

<

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

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

相关文章

出类拔萃的四款录屏工具你pick哪一个?

在这个屏幕时代&#xff0c;录屏已经成为我们日常工作和娱乐中不可或缺的一部分。无论是为了记录游戏精彩瞬间&#xff0c;还是为了分享教程和经验&#xff0c;一个好的录屏工具都是必不可少的。今天&#xff0c;就让我为大家推荐几款电脑免费录屏工具&#xff0c;并分享一下使…

DDD通用语言、多尿和尿频-《分析模式》漫谈41

“Analysis Patterns”的第3章有这么一句&#xff1a; A patient with observations of the presence of thirst, weight loss, and polyuria indicates diabetes. 2004&#xff08;机械工业出版社&#xff09;中译本的译文为&#xff1a; 虽然没有完全使用类图&#xff08;类…

Ajax是什么?

Ajax是什么&#xff1f; Ajax是创建交互式网页应用的网页开发技术。简单来说就是网页在不加载的情况下&#xff0c;可以跟服务器交换数据&#xff0c;并更新页面的内容。 原理&#xff1a; 1. 创建xhr&#xff08;xmlHttpRequest&#xff09;对象; 2, 通过xhr对象的open()方法和…

【C++_string类练习】仅仅反转字母

题目链接&#xff1a;仅仅反转字母 解题思路&#xff1a; 这种反转字符的题目我第一个想到的方法就是&#xff1a;双指针 一个指针在前start&#xff0c;一个指针在后back&#xff0c; 如果指针所指向的位置的值是字母&#xff0c;那么两个指针位置的值就进行交换&#xff0…

矿山企业电能智能化管理怎么实现

0引言 电力工业是国民经济和社会发展的基础&#xff0c;随着高质量发展要求的提升&#xff0c;提高能源效率对工业企业至关重要。有效提高电力能效的方法包括技术创新、监测用能行为和探索技术解决方案。智能化的电能管理是应对资源和环境压力的关键措施&#xff0c;对提高用电…

点餐小程序实战教程20广告管理

目录 1 创建数据源2 添加轮播容器3 创建变量4 绑定变量5 预览应用总结 一般餐厅需要有一些宣传&#xff0c;在我们的点餐页面可以在顶部加载广告位。广告主要是用轮播图的形式进行展示&#xff0c;本节我们介绍一下如果显示广告。 1 创建数据源 打开控制台&#xff0c;点击应用…

10-Docker安装Redis

10-Docker安装Redis Docker安装Redis 以 Redis 6.0.8 为例&#xff1a; docker pull redis:6.0.8直接pull会出现以下错误 [rootdocker ~]# docker pull redis:6.0.8 Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request can…

ubuntu安装docker及docker compose

在Ubuntu上安装Docker通常包括以下几个步骤&#xff1a; 更新包索引&#xff1a; 打开终端并运行以下命令来更新你的包索引&#xff1a; sudo apt update安装必要的依赖&#xff1a; 安装apt-transport-https、ca-certificates、curl、software-properties-common、gnupg等软件…

Java基础-8新特性

Lambda 表达式 Lambda 表达式&#xff0c;也可称为闭包。Lambda 表达式是一个匿名函数&#xff0c;我们可以这样理解 Lambda 表达式&#xff1a;Lambda 是一段可以传递的代码&#xff08;能够做到将代码像数据一样进行传递&#xff09;。格式如下&#xff1a; (parameters) -&g…

【Cadence27】HDL拷贝工程➕Allegro导出DXF和3D文件STP

【转载】Cadence Design Entry HDL 使用教程 【Cadence01】Cadence PCB Edit相对延迟与绝对延迟的显示问题 【Cadence02】Allegro引脚焊盘Pin设置为透明 【Cadence03】cadence不小心删掉钢网层怎么办&#xff1f; 【Cadence04】一般情况下Allegro PCB设计时的约束规则设置&a…

【入门篇】2.8 时钟(三)

目录 5.3.1 配置时钟源相关参数:调用函数 HAL_RCC_OscConfig() 5.3.2 配置系统时钟源以及 SYSCLK、AHB、APB1 和 APB2 的分频系数:调用函数HAL_RCC_ClockConfig() 六,STM32F4 时钟使能和配置 6.1 使能时钟 6.2 禁用时钟 5.3.1 配置时钟源相关参数:调用函数 HAL_RCC_Os…

【力扣 | SQL题 | 每日4题】力扣2308,2324,2346,2372

4 mid&#xff0c;还是比较常规的。 1. 力扣2308&#xff1a;按性别排列表格 1.1 题目&#xff1a; 表: Genders ---------------------- | Column Name | Type | ---------------------- | user_id | int | | gender | varchar | ---------------------- u…

卸载 Git

目录 打开 Geek找到 Git右键卸载 Git卸载完成等待扫描注册表点击完成清除Git在本地的配置文件 打开 Geek 找到 Git 右键卸载 Git 卸载完成 等待扫描注册表 点击完成 已经删除完毕 清除Git在本地的配置文件 进入 C:\Users\用户名 删除框起来的配置文件 &#x1f447; 源码资料…

Map转Map

将一个Map<String,Integer> 转换成Map<String,String> //创建一个创建Map的公共方法 private static <T> Map<String,T> newMap(String key,T val,Object...kv){Map<String,T> ans new HashMap<>(8);ans.put(key,val);for(int i0,size k…

webpack自定义插件 ChangeScriptSrcPlugin

插件文件 class ChangeScriptSrcPlugin {apply(compiler) {const pluginName "ChangeScriptSrcPlugin";compiler.hooks.compilation.tap(pluginName, (compilation, callback) > {compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(pluginName,(html…

DES对称加密算法

DES&#xff08;Data Encryption Standard&#xff0c;数据加密标准&#xff09;是一种对称加密算法。 算法概述 加密类型&#xff1a;对称加密&#xff08;同一密钥用于加密和解密&#xff09;。密钥长度&#xff1a;64位&#xff08;8字节&#xff09;&#xff0c;其中有效…

java--网络编程

网络的相关概念 网络通信 1.概念:两台设备之间通过网络实现数据传输2.网络通信:将数据通过网络从一台设备传输到另一台设备3.java.net包下提供了一系列的类或接口&#xff0c;供程序员使用&#xff0c;完成网络通信 网络 概念&#xff1a;两台或多台设备通过一定物理设备连接…

UltraISO(软碟通)制作U盘制作Ubuntu20.04启动盘

目录 一、启动盘制作 1、工具准备 2、打开UltraISO后&#xff0c;点击左上角的文件&#xff0c;在打开的下拉项中&#xff0c;选择打开准备好的Ubuntu系统20.04 LTS镜像文件(ubuntu-20.04-desktop-amd64.iso)&#xff1b; 3、然后点击启动->写入硬盘映像 4、在弹出的窗…

Pollard‘s p-1算法

概述 光滑数 (Smooth number)&#xff1a;指可以分解为多个小素数乘积的正整数 当p是N 的因数&#xff0c;并且p−1是光滑数&#xff0c;可以考虑使用Pollards p-1算法来分解N 当p是N的因数&#xff0c;并且p1是光滑数&#xff0c;可以考虑使用Williamss p1算法来分解N 这里…

11.useComponentDidMount

在 React 的函数组件中,有时我们需要在组件首次挂载后执行某些操作,这在类组件中通常通过 componentDidMount 生命周期方法来实现。useComponentDidMount 钩子提供了一种简洁的方式来在函数组件中实现相同的功能。这个自定义钩子使得在组件挂载后执行一次性操作变得简单直观。…