README_ZH.md

vite-plugin-virtual-html

简介

Vite的多页面应用需要将html文件放到项目根目录或通过从根目录起的路径访问。

这会导致在开发和构建过程的html文件访问不一致.例如在开发时,你需要访问/nested/a.html,但是在构建后,你需要访问的时/a.html

所以,为了解决这个问题,需要在开发时对html请求进行拦截并返回相应的html内容

这个插件使用了以下的钩子:

• 开发过程
  • config: 将下面的3个钩子注入到插件中
  • configureServer: 拦截并响应html请求, 处理connect-history-api-fallback的请求
  • load: 加载并处理html代码
  • transform: 在html文件中注入一些可配置的代码等
• 构建过程
  • config: 将下面的3个钩子注入到插件中,并将html文件复制到项目根目录
  • load: 加载并处理html代码
  • transform: 在html文件中注入一些可配置的代码等
  • closeBundle: 移除在config中复制的html文件

更新信息

功能

• 允许你将html文件放置到项目的任意位置（与@vue/cli的pages配置相同）
  • 当dev开发时，拦截html请求，然后将配置的相应的html文件内容返回给浏览器
  • 当build项目时，将配置的html文件复制到dist目录下，同时删除其他html文件及其目录
• 自动配置build.rollupOptions.input
• 如果你的html文件没有配置入口文件，则将会在html文件附近寻找与html文件同名的js/ts文件，并将其添加到html的文件内容中

使用方法

pnpm install vite-plugin-virtual-html -D

在vite.config.ts中配置插件

// vite.config.ts
const virtualHtml from 'vite-plugin-virtual-html'

const pages = {
    index: '/src/index/index.html',
    login: '/src/login/login.html',
}

module.exports = {
  plugins: [
    virtualHtml({
      pages,
    })
  ],
}

插件使用事项:

• 一定不要再编译库时使用这个插件!!!

配置

pages

配置项目的html文件路径

pages可配置为Pages对象或true

当配置为true时,会根据extraGlobPattern的配置自动读取项目中的html文件路径并生成pages对象

注意:

• entry与template目前不能同时使用

extraGlobPattern

仅pages为true时可用,默认值为

  '**/*.html',
  '!node_modules/**/*.html',
  '!.**/*.html'

indexPage

指定当访问index或/页面时应当返回pages中的哪一个html文件的内容

render, data

自定义全局模版渲染函数及渲染时使用的数据

注意:

• 目前我只测试了ejs,其他模版系统应该也可以正常工作

injectCode

将配置的replacement放到find前面或后面

rewrites

处理connect-history-api-fallback的重写请求

urlTransformer

完全由开发者自定义处理dev-server拦截到的url,传入的参数为(resolvedUrl,req)

其中,第一个参数是插件初步处理的url字符串, 第二个参数是一个req对象(http.IncomingMessage)

返回值为一个新的url字符串