vite-plugin-html

安装插件

npm install vite-plugin-html -D

demo1（普通写法）

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

export default function setupHtml(env: ImportMetaEnv) {
  const injectData: Record<string, any> = { title: env.VITE_APP_TITLE, injectScript: '' }
  if (env.VITE_PLATFORM === 'zlb') {
    const scriptList = [
      // 浙里办
      {
        src: '//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.1.0/zwjsbridge.js',
        type: 'text/javascript',
      },
      // 埋点
      {
        src: '//assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js',
        type: 'text/javascript',
      },
    ]
    injectData.injectScript = scriptList.reduce((acc, cur) => {
      acc += `<script src="${cur.src}" type="${cur.type}"></script>`
      return acc
    }, '')
  }
  return createHtmlPlugin({
    minify: true,
    entry: 'src/main.ts',
    template: 'index.html',
    inject: {
      data: injectData,
    },
  })
}

解析

inject的data属性提供变量可直接在html中使用，还可继续添加自定义变量字段，在html页面接收，写法如下：

demo2（高级写法）

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

export default function setupHtml(env: any) {
	const injectData: Record<string, any> = {
		title: env.VITE_APP_TITLE
	}
	const publicTags: any = [
		{
			injectTo: 'head-prepend',
			tag: 'link',
			attrs: {
				href: '/style/common.css',
				rel: 'stylesheet'
			}
		}
	]

	const zwfwTags: any = [
		{
			injectTo: 'head-prepend',
			tag: 'link',
			attrs: {
				href: '/zwfw/style/zwfw.css',
				rel: 'stylesheet'
			}
		},
		{
			injectTo: 'head-prepend',
			tag: 'script',
			attrs: {
				type: 'text/javascript',
				src: '//cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js'
			}
		},
		{
			injectTo: 'head-prepend',
			tag: 'script',
			attrs: {
				type: 'text/javascript',
				src: '//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.1.0/zwjsbridge.js'
			}
		},
		{
			injectTo: 'head-prepend',
			tag: 'script',
			attrs: {
				type: 'text/javascript',
				src: '//assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js'
			}
		},
		{
			injectTo: 'head-prepend',
			tag: 'script',
			attrs: {
				type: 'text/javascript',
				src: '//zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/1308/2109061849141316.js'
			}
		},
		{
			injectTo: 'head-prepend',
			tag: 'script',
			attrs: {
				type: 'text/javascript',
				src: '/zwfw/script/setMode.js'
			}
		},
		{
			injectTo: 'head-prepend',
			tag: 'script',
			attrs: {
				type: 'text/javascript',
				src: '/zwfw/script/redirect.js'
			}
		},
		{
			injectTo: 'body-prepend',
			tag: 'div',
			attrs: {
				id: 'zjzwCommonheader'
			},
			children: [
				{ tag: 'script', attrs: { type: 'text/javascript', src: '/zwfw/script/header.js' } },
				{
					tag: 'script',
					attrs: {
						type: 'text/javascript',
						src: '//zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/zjzw2023/commonHeader.js'
					}
				}
			]
		},
		{
			injectTo: 'body-prepend',
			tag: 'div',
			attrs: {
				id: 'zjzwFixed'
			},
			children: [
				{
					tag: 'script',
					attrs: {
						type: 'text/javascript',
						src: '//zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/zjzw2023/zjzwFixed.js'
					}
				}
			]
		},
		{
			injectTo: 'body',
			tag: 'div',
			attrs: {
				id: 'zjzwCommonfooter'
			},
			children: [
				{
					tag: 'script',
					attrs: {
						type: 'text/javascript',
						src: '//zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/zjzw2023/zjzwFooter.js'
					}
				}
			]
		}
	]

	const selectTags = () => {
		const arr = [...publicTags]
		if (env.VITE_PLATFORM === 'zwfw') {
			arr.push(...zwfwTags)
		}
		return arr
	}

	return createHtmlPlugin({
		minify: true,
		entry: 'src/main.js',
		template: 'index.html',
		inject: {
			data: injectData,
			tags: selectTags()
		}
	})
}

解析

直接通过tag标签的形式，更加优雅 下面是引用的本地文件目录，放在public下；html页面不用做任何操作

下面是插件自动注入的标签及脚本

这种操作，可以让index.html页面更简洁，逻辑控制起来更加优雅。