vue3中vite基于vite-plugin-html的多入口打包

news2024/9/26 1:24:59

先看打包效果
在这里插入图片描述
1、安装vite-plugin-html
2、配置多个入口
在这里插入图片描述
每个入口都要有模板(index.html、App.vue、main.js复制一份,根据实际需求调整三个文件)
3、配置vite.config.js
在这里插入图片描述
4、代码片段


import { createHtmlPlugin } from 'vite-plugin-html'

const htmlParams = {
  minify: true,
  pages: [
    {
      filename: 'index', // filename 默认是template文件名,就是beijing.html
      entry: '/src/main.js',
      template: 'index.html'
    },
    {
      filename: 'form',
      entry: '/src/views/resourceManage/fieldFormManage/main.js',
      template: 'form.html'
    }
  ]
}

 createHtmlPlugin(htmlParams)

  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name]-[hash].[ext]', // 静态资源
        chunkFileNames: 'js/[name]-[hash].js', // 代码分割中产生的 chunk
        entryFileNames: 'js/[name]-[hash].js', // 指定 chunks 的入口文件
        compact: true
      }
    }
  }

(完)

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

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

相关文章

关于springboot的Rest请求映射处理的源码分析(一)

我们在开发中很常见的一种方式是通过请求的类型,也就是restful风格来区别我们的请求接口。 通过请求类型的不同(GET POST PUT DELETE) 来区分即便是请求路径相同的请求。 但是他的底层是如何支持的呢,明明我请求路径都是/user。就因为类型不同就能区分到…

网络层 III(划分子网和构造超网)【★★★★★★】

(★★)代表非常重要的知识点,(★)代表重要的知识点。 一、网络层转发分组的过程 分组转发都是基于目的主机所在网络的,这是因为互联网上的网络数远小于主机数,这样可以极大地压缩转发表的大小。…

【Python报错】AttributeError`:`‘NoneType‘ object has no attribute ‘XXXX‘`

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 引言 在Python编程中,AttributeError是一个常见的错误类型,它表示尝试访问的对象没有该属性。本文将探讨…

深度强化学习算法(六)(附带MATLAB程序)

深度强化学习(Deep Reinforcement Learning, DRL)结合了深度学习和强化学习的优点,能够处理具有高维状态和动作空间的复杂任务。它的核心思想是利用深度神经网络来逼近强化学习中的策略函数和价值函数,从而提高学习能力和决策效率…

CNN网络的一些基本知识

CNN 网络的layer介绍 在卷积神经网络(Convolutional Neural Network,CNN)中,往往包含许多种不同的网络层交替组成,主要有卷积层(Convolutional Layer)、池化层(Pooling Layer&#…

《黑神话:悟空》爆火,对程序员的 5 点启示(2)

前言 继续上篇未完章节…… 4. 需求捕捉 需求有真需求和伪需求的区别,捕捉和理解用户的真需求对于产品非常重要。 在《黑神话:悟空》面世以后,很多玩家都不吝称赞,有玩家这么评论: 不吹牛逼,这一段我眼…

C#中通过TabControl控制MDI子窗体显示切换的实现过程

类似excel表格中各个表单sheet的切换效果,使用tabcontrol控件实现类似的功能。效果如下: 过程涉及父窗体MDIParent1、子窗体main、自定义基础功能类MdiChildBase。 基础功能类MdiChildBase继承自Form创建,定义了一个委托SetTabControlDelega…

apisix 本地开发环境部署

apisix 本地开发环境部署 本地开发环境部署可以采用 docker-compose 部署,配置文件如下 apisix 配置文件 apisix:node_listen: 9080 # APISIX 节点监听地址enable_ipv6: falsehttp:port: 9080 # APISIX HTTP 端口#https:# port: 9443 # APISIX HTTPS 端口# ssl…

《机器学习》K-means 聚类 原理、参数解析、案例实现

1. 引言 随着数据的快速增长和复杂性的不断提高,如何从大量数据中提取有用信息已成为数据科学和人工智能领域的核心挑战。聚类作为一种无监督学习方法,通过将数据分为若干组,使得同一组内的样本具有较高的相似性,而不同组之间的样本差异显著。这种方法被广泛应用于数据分析…

探索极速Python:Sanic框架的魔力

文章目录 探索极速Python:Sanic框架的魔力背景:为什么选择Sanic?Sanic是什么?如何安装Sanic?简单的库函数使用方法场景应用示例常见Bug及解决方案总结 探索极速Python:Sanic框架的魔力 背景:为什…

带你了解RS485通讯网关-天拓四方

在当今工业自动化和智能化的浪潮中,高效、可靠的数据通讯是确保系统运行顺畅的关键。RS485通讯网关作为工业通讯网络中的核心设备,承担着数据传输的重要任务。本文将从RS485通讯网关的技术背景、功能特性、应用场景以及选购要点等方面进行深入探讨&#…

【智能算法应用】基于融合改进A星-麻雀搜索算法求解六边形栅格地图路径规划

目录 1.算法原理2.结果展示3.参考文献4.代码获取 1.算法原理 【智能算法】麻雀搜索算法(SSA)原理及实现 六边形栅格地图 分析一下地图: 六边形栅格地图上移动可以看做6领域运动,偶数列与奇数列移动方式有所差异,将六…

[每周一更]-(第112期):WDL(Workflow Description Language)说明及使用示例

文章目录 什么是WDL?WDL的基本结构示例 WDL 文件示例任务:字符串反转示例工作流:字符串处理 WDL 文件详解任务(Task)工作流(Workflow) 运行示例总结报错参考 什么是WDL? WDL&#x…

Java图形用户界面之Applet设计

Applet设计 前言一、Applet的基本工作原理与使用局限Applet的基本工作原理代码示例 Java Applet 的使用局限Java沙箱安全机制原理 Applet的生命周期与运行方式 二、Applet类Applet类的层次结构常用方法生命周期方法显示方法多媒体支持方法其他方法 三、Applet和GUI基于AWT和Swi…

字符操作函数和内存操作函数

1 字符操作函数 1.strlen size_t strlen ( const char * str ); 函数功能&#xff1a;返回以\0结尾的字符串长度&#xff0c;不包含\0。 注&#xff1a;strlen返回值是一个无符号整数size_t。 #include <stdio.h>int main() {const char*str1 "abcdef";const…

Linux基础软件-selinux库文件swap

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 Linux进阶部分又分了很多小的部分,我们刚讲完了Linux日常运维。讲的那些东西都算是系统自带的&#xff0c;但是Linux作为一个…

LVGL 控件之圆弧(lv_arc)

目录 一、圆弧部件1、部件组成2、lv_art_t3、圆弧部件角度设置4、圆弧部件旋转设置5、圆弧的模式选择6、圆弧部件的变化率设置7、移除旋钮8、事件9、获取/设置信息相关的 API 二、例程 一、圆弧部件 1、部件组成 圆弧&#xff08;lv_arc&#xff09;部件由三个部分组成&#…

学习之SQL语言之DDL

查询 查询所有数据 SHOW DATABASES&#xff1b; 查询当前数据库 SELECT DATABASE(); 创建 CREATE DATABASE IF NOT EXISTS 数据库名&#xff1b; 删除 DROP DATABASE IF EXISTS 数据库名&#xff1b; 使用 USE 数据库名&#xff1b; 查询当前数据库所有表 SHOW TABLES; 查…

优化大型语言模型微调:MoLA层级专家分配策略

人工智能咨询培训老师叶梓 转载标明出处 大模型&#xff08;LLMs&#xff09;的微调过程中&#xff0c;计算资源的需求巨大&#xff0c;这促使研究者们探索参数高效微调&#xff08;PEFT&#xff09;技术。低秩适应&#xff08;LoRA&#xff09;和专家混合模型&#xff08;MoE…

超分 Real-ESRGAN 使用笔记

效果图 目录 依赖项: 视频推理入口: 图片推理入口文件: RealESRGAN_x4plus 12g显存不够 RealESRGAN_x4plus_anime_6B 的效果 树枝之间产生了蒙版 RealESRNet_x4plus 有点模糊 2022年开源的 GitHub - xinntao/Real-ESRGAN: Real-ESRGAN aims at developing Practical…