1.说明
vite-plugin-html的npm首页
原文:
一个为index.html提供minify和基于EJS模板功能的Vite插件。
- minify:压缩
index.html
代码。
- EJS:给
index.html
提供访问变量的能力。
详情看配置和使用。
2.安装
yarn add vite-plugin-html --dev
3.创建配置文件
build\vite\plugin\html.ts
/**
* Plugin to minimize and use ejs template syntax in index.html.
* https://github.com/anncwb/vite-plugin-html
*/
import type { Plugin } from 'vite';
import type { ViteEnv } from '../../utils';
import html from 'vite-plugin-html';
import pkg from '../../../package.json';
import { GLOB_CONFIG_FILE_NAME } from '../../constant';
export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
// ↓这里后续章动态配置讲解
// const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
// const getAppConfigSrc = () => {
// return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
// };
const htmlPlugin: Plugin[] = html({
minify: isBuild,
inject: {
// Inject data into ejs template
injectData: {
title: VITE_GLOB_APP_TITLE,
},
// ↓这里后续章动态配置讲解
// tags: isBuild
// ? [
// {
// tag: 'script',
// attrs: {
// src: getAppConfigSrc(),
// },
// },
// ]
// : [],
},
});
return htmlPlugin;
}
4.配置Vite插件
build\vite\plugin\index.ts
// ...
import { configHtmlPlugin } from './html';
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
// ...
// vite-plugin-html
vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
// ...
}
5.补充
做完本章操作之后,我突然发现项目不能编译了。
总是报package.json
找不到。我看了一下代码,主要就是build\vite\plugin\html.ts
中的导入无法找到。
我反复对比了一下VbenAdmin
的源码。也没有发现有什么不同的地方。
然后我又试了一下,当执行vite
命令的时候,build
文件夹下始终不能访问package.json
。但是src
和vite.config.ts
中都可以导入访问。
那么这里有两种讲解方案。
5.1.去掉导入
这里的导入只是我们在使用_app.config.js
的时候加上一个版本信息。可以让我们知道,这个项目是多久打包的,打包的时候版本是多少。所以去掉也无妨,_app.config.js
还是一样可以访问的。
5.2.从vite.config.ts中传参下去
我使用了这个方案,因为万一build
文件夹其他地方要用package.json
呢。不过用的地方应该也很少吧。
修改vite.config.ts
:
// ...
import pkg from './package.json';
// ...
export default ({ command, mode }: ConfigEnv): UserConfig => {
// ...
return {
// ...
// The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
plugins: createVitePlugins(viteEnv, isBuild, pkg),
// ...
};
};
修改build\vite\plugin\index.ts
:
// ...
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
// ...
vitePlugins.push(configHtmlPlugin(viteEnv, isBuild, pkg));
return vitePlugins;
}
修改build\vite\plugin\html.ts
:
// ...
import html from 'vite-plugin-html';
export function configHtmlPlugin(env: ViteEnv, isBuild: boolean, pkg: any) {
// ...
const getAppConfigSrc = () => {
return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
};
// ...
return htmlPlugin;
}
上一章
第四十六章-Vite插件-@vitejs-plugin-legacy
下一章
第四十八章-完善build的utils.ts