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

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

    index.html
  1. <!DOCTYPE html>
  2. <html>
  3.   <!-- region -->
  4.   <head>
  5.     <meta charset="utf-8" />
  6.     <title>Hello World</title>
  7.   </head>
  8.   <body>
  9.     <h1>Hello from Index!</h1>
  10.   </body>
  11.   <!-- endregion -->
  12. </html>

other.html

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

    dist/index.html
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Hello World</title>
  6.   </head>
  7.   <body>
  8.     <h1>Hello from Index!</h1>
  9.     <script type="module" src="/src/main.js"></script>
  10.   </body>
  11. </html>

dist/other.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Hello World</title>
  6.   </head>
  7.   <body>
  8.     <h1>Hello from Other!</h1>
  9.     <script type="module" src="/src/other.js"></script>
  10.   </body>
  11. </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. centos7开放8080端口

    1. firewall-cmd --state  :令防火墙处于开启状态 systemctl start firewalld.service: 2. firewall-cmd --zone=publi ...

  2. windows下创建虚拟环境

    创建虚拟环境依赖以下两个模块 virtualenv  和virtualenvwrapper-win 1.下载 2.修改环境变量,增加一条 WORKON_HOME:路径 3.  同步配置 去向Pytho ...

  3. 用声网 Android UIKit 为实时视频通话应用添加自定义背景丨声网 SDK 教程

    使用声网 SDK 和 UIKit 创建视频推流应用非常简单,而且声网还有许多功能,可以提高视频通话的质量和便利性.例如,我们可以在视频通话过程中使用虚拟背景,为视频通话增添趣味性. 我们可以通过以下三 ...

  4. FWT/快速沃尔什变换 入门指南

    来学点好玩的. 引入 我们也许学过,\(FFT\) 可以解决一类卷积: \[C_i=\sum^{k+j=i} A_iB_j \] 现在我们稍微变一下式子: \[C_i=\sum^{i=k \And j ...

  5. 手撕Ford-Fulkerson algorithm 学一半的笔记

    目录 定义大概就这些 伪代码 自己做slide里的quiz 搬运别人的代码 我明白了, 余量网络 名如其名 比如你f/c=3/5 那么正边2,reverse edge3,加起来是5 在这个你建的新图上 ...

  6. BootstrapBlazor + FreeSql ORM 实战 Table 表格组件维护多表数据 - OneToOne

    OneToOne 垂直扩展表字段是很常见的方法, 主表存商品资料, 分表存每个客户对应商品的备注和个性化的价格等等, 本文使用Blazor一步步实现这个简单的需求. 1. 基于实战 10分钟编写数据库 ...

  7. NOIP2022游记

    NOIP2022游记 今年是第二次考NOIP了,去年第一次考的时候没学过什么东西,混了个省二.今年以高中生的身份考,不仅仅是要省一,还得拿个不错的名次,任务不小. 考试当天早上校园里的雾很大,不知道会 ...

  8. 使用Electron-builder将web项目封装客户端安装包 发布

    背景:之前用electron-packager将web项目打包成客户端时,exe文件只能在当前文件夹下运行,如果发送给别人使用 极不方便.所以我们可以用electron-builder将web项目封装 ...

  9. ArcGIS JS API加载带参数的rest服务参数被截掉问题处理

    我们在做一些项目的时候,会对ArcGIS的图层服务进行转发,增加一些权限参数以保证数据访问的安全, 但使用ArcGIS JS API加载的时候,对于rest服务?后增加的参数会被截掉. 为解决这个问题 ...

  10. 【Note】贪心

    感谢 $ \text{orzws/chy} $ 倾情授课. 目录 -1. 证明方式 0. 朴素贪心 AT2557 [ARC073C] Ball Coloring P2587 [ZJOI2008]泡泡堂 ...