Vite 是一个 web 开发构建工具,它可以用于开发单页应用和多页应用。要在 Vite 中配置多入口,可以:

  1. 在 vite.config.js 中定义多个 entry 入口:
export default {
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
other: resolve(__dirname, 'other.html')
}
}
}
}
  1. 为每个 HTML 文件定义一个模板,使用 和 标记模板内容:

    index.html
<!DOCTYPE html>
<html>
<!-- region -->
<head>
<meta charset="utf-8" />
<title>Hello World</title>
</head>
<body>
<h1>Hello from Index!</h1>
</body>
<!-- endregion -->
</html>

other.html

<!DOCTYPE html>
<html>
<!-- region -->
<head>
<meta charset="utf-8" />
<title>Hello World</title>
</head>
<body>
<h1>Hello from Other!</h1>
</body>
<!-- endregion -->
</html>
  1. 运行 vite build,Vite 会识别模板并生成独立的 HTML 文件:

    dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
</head>
<body>
<h1>Hello from Index!</h1>
<script type="module" src="/src/main.js"></script>
</body>
</html>

dist/other.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
</head>
<body>
<h1>Hello from Other!</h1>
<script type="module" src="/src/other.js"></script>
</body>
</html>

每个 HTML 会自动引入对应名称的 JS 入口文件。

ai问答:使用vite如何配置多入口页面的更多相关文章

  1. AI应用开发实战 - 从零开始配置环境

    AI应用开发实战 - 从零开始配置环境 与本篇配套的视频教程请访问:https://www.bilibili.com/video/av24421492/ 建议和反馈,请发送到 https://gith ...

  2. 【第八篇】mvc razor视图配置404 500页面

    记住是最外层的这个Web.config 在  <system.web> </system.web>节点里面配置 <customErrors defaultRedirect ...

  3. 自学Aruba6.1-基本网络参数配置(web页面配置)

    点击返回:自学Aruba之路 自学Aruba6.1-基本网络参数配置(web页面配置) 1 配置VLAN 1.1  新建VLAN Configuration---VLANs中,VLANID选项卡下的A ...

  4. 配置Jsp错误页面

    配置Jsp错误页面一般我们有2种做法: (1)在页面中用指令进行配置,即page指令的errorPage和isErrorPage:可以使用page指令的errorPage来指定错误页!在当前JSP页面 ...

  5. appt查看应用包报名和入口页面

    appt在哪里? aapt不需要另外安装喔,有安装了adt的,可以直接在adt../sdk/build-tools/android-xx/下,找到aapt,详细路径如图 怎么使用aapt.bat? 直 ...

  6. SpringBoot配置使用jsp页面技术

    SpringBoot配置使用jsp页面技术 1.pom配置 package配置必须为war类型 添加依赖 <packaging>war</packaging> <depe ...

  7. 如何从统计中批量获取BD搜索关键词及对应的入口页面?

    前面我们介绍了通过cnzz的访问明细获取到搜索关键词及对应的入口页面,但是从BD搜索进来的关键词无法完整显示,只能呈现一些bd图片搜索的关键词,这是因为百度宣布从去年5月开始逐渐取消了referer关 ...

  8. 部分vivo和oppo手机,使用上传图片功能,可能会出现退出webview的现象(回退到app的入口页面)

    在公司的app里面嵌入了一个h5页面,h5页面有个使用图片上传功能,上传图片出现闪退的现象 问题描述:vivo手机,在app内的wap页面使用上传图片的功能,在选择好图片点击确认按钮后,出现退出整个w ...

  9. Nginx 核心配置-自定义错误页面

    Nginx 核心配置-自定义错误页面 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 生产环境中错误页面一般都是UI或开发工程师提供的,他们已经在软件中定义好了,我们这里就简单写个h ...

  10. case设计及验证:入口+页面+展示

    测试个性CB问题, 功能整体结构为:入口+页面+展示 总结: 1. 产品文档为主,其次是服务端接口返回.数据结构及字段值确认.结合实际场景检查是否有遗漏或不合理. 2. 以字段为维度,每个字段的检查点 ...

随机推荐

  1. 运行npm报错:无法加载文件 D:\nodejs\node_global\webpack.ps1,因为在此系统上禁止运行脚本

    npm报错 在 windows终端输入 vue init webpack app, 创建一个名为 app 的 Vue 项目时报错如下: 无法加载文件 D:\nodejs\node_global\web ...

  2. TAP 交换机

    首发第一篇,就想分享一下TAP交换机的网络设备,为啥要谈这个呢,因为是一个冷门产品,大厂一般都没有,有也不作为重点产品推介,所以关注的人少,希望能给有这方面需求的人,又苦于找不到介绍资料的人以帮助.在 ...

  3. docker安装配置gitlab时的常用命令整理

    1.下载安装dockerapt install docker.io2.服务启动service docker start 3.拉取gitlabdocker pull beginor/gitlab-ce: ...

  4. IDEA下Maven项目中通过JDBC连接MySQL数据库

    ### 1. 在当前Maven项目的pom.xml文件中导入数据库依赖: ```<dependency> <groupId>mysql</groupId> < ...

  5. CF309E 题解

    11:30,过题.12:50,忘记做法. 吃饭时不该看未来日记的,Ynoj 害人不浅(确信). 以上为个人吐槽. 题目大意 不知道题目翻译是个啥...但讨论区有大佬给出了精确的翻译.我改得符合题目背景 ...

  6. 自己动手从零写桌面操作系统GrapeOS系列教程——19.硬盘读写理论知识

    学习操作系统原理最好的方法是自己写一个简单的操作系统. 一.硬盘控制器 我们前面已经讲过硬盘控制器是一种I/O接口,CPU通过它就能间接的读写硬盘.硬盘控制器主要有IDE和SATA两种,我们这里只考虑 ...

  7. java异常--基础内容

    java异常--基础内容 异常指程序运行中出现的不期而至的各种状况:文件找不到,网络连接失败,非法参数... 异常发生在程序运行期间,他影响了正常的程序执行流程. 三种类型异常(Exception): ...

  8. 恰好经过k条边的最短路

    需要用到离散数学中关于关系矩阵的运算的知识 一个表示一个图中任意两点间经过2条边最短路的关系矩阵的平方表示的是任意两点间经过4条边的最短路的关系矩阵 原因在于当我们选定中间点时,路径的前半部分和后半部 ...

  9. vue cli3中配置生产环境、开发环境、测试环境

    首先在packjson中配置 "scripts": { "serve": "vue-cli-service serve", //调用开发ap ...

  10. 构建基于深度学习神经网络协同过滤模型(NCF)的视频推荐系统(Python3.10/Tensorflow2.11)

    毋庸讳言,和传统架构(BS开发/CS开发)相比,人工智能技术确实有一定的基础门槛,它注定不是大众化,普适化的东西.但也不能否认,人工智能技术也具备像传统架构一样"套路化"的流程,也 ...