vite-plugin-virtual-html

July 7, 2023 · View on GitHub

简介

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,
    })
  ],
}

插件使用事项:

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

配置

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字符串