just parse html for your inject some script or css, more then inject some data


- Insert variables into the host page through the ejs template engine;
- Through configuration items, some dynamically inserted javascript and css files are usually used to coordinate with the project externals
- Indexhtml compression
- support multi page applications
``shell
yarn add vite-plugin-parse-html -D
npm i vite-plugin-parse-html -D
`
1γUse the inject and minify configuration item in vite.config.ts to configure
`typescript`
...
import { inject, minify } from 'vite-plugin-parse-html'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
inject({
data: {
title: 'test project',
},
sources: [
'http://xxxx.css',
'http://xxxx.js',
{ type: 'javascript', url: 'http://yyyy'},
],
}),
minify({
isMinify: true,
}),
react(),
],
})
2γUsing plugins in multi page programs
`typescript``
...
import { inject, minify } from 'vite-plugin-parse-html'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
inject([
{
path: '/index.html',
data: {
title: 'test project',
},
sources: [
'http://xxxx.css',
'http://xxxx.js',
{ type: 'javascript', url: 'http://yyyy'},
],
},
{
path:'/nest/index.html'
data: {
title: 'test project',
},
sources: [
'http://xxxx.css',
'http://xxxx.js',
{ type: 'javascript', url: 'http://yyyy'},
],
}
]),
minify({
isMinify: true,
}),
...
],
})
- inject(options: InjectOptions | InjectOptions[])
| parameter | type | default | example | description |
| ---------- | ------------------- | ------------- | ------------------ | ------------------------------------------------------------------------------------- |
| path | string | '/index.html' | '/nest/index.html' | multiple page relative path |
| data | Record
| ejsOptions | Options | | | |
| sources | Array
- SourceItem
| parameter | type | default | example | description |
| --------- | ------------------------------------------- | ------- | ------------------- | ------------------------- |
| type | 'css' or 'javascript' | 'css' | type: 'css' | source type |
| url | string | | url: 'http://xxxxx' | source cdn url |
| position | 'head' 'body' 'head-prepend' 'body-prepend' | 'head' | position: 'head' | inject to html position |
| attrs | Record
- minifyOpt(options: MinifyOptions)
| parameter | type | default | example | description |
| --------- | ------- | ------- | -------------- | --------------------------------- |
| isMinify | boolean | true | isMinify: true | Whether to compress the host page |