vite-plugin-html-meta

Generate meta tags to html files according to configuration

Demo

1import { defineConfig } from 'vite'
2import vue from '@vitejs/plugin-vue'
3import { htmlMetaPlugin } from 'vite-plugin-html-meta'
4
5export default defineConfig({
6  plugins: [
7    vue(),
8    htmlMetaPlugin({
9      viewport: {
10        width: 'device-width',
11        height: 'device-height',
12        initialScale: 0.4,
13      },
14      csp: {
15        defaultSrc: ['self'],
16        connectSrc: ['http://127.0.0.1:9003', 'ws://localhost:5173', 'http://47.116.130.135'],
17        scriptSrc: ['self', 'unsafe-inline'],
18        imgSrc: ['data:', 'https://*', 'blob:'],
19        workerSrc: ['none'],
20        reportUri: 'https://www.baidu.com',
21      },
22      referrer: 'origin',
23      description: 'description',
24      keywords: ['HTML', 'vite', 'vite-plugin-html-meta'],
25      author: 'QingHuan',
26    }),
27  ],
28})
29

output

1<meta name="viewport" content="width=device-width,height=device-height,initial-scale=0.4" />
2<meta http-equiv="Content-Security-Policy" content="default-src 'self';connect-src http://127.0.0.1:9003 ws://localhost:5173 http://47.116.130.135;script-src 'self' 'unsafe-inline';img-src data: https://* blob:;worker-src 'none';report-uri https://www.baidu.com;" />
3<meta name="referrer" content="origin" />
4<meta name="description" content="description" />
5<meta name="keywords" content="HTML,vite,vite-plugin-html-meta" />
6<meta name="author" content="QingHuan" />

Type Declarations

1type Interactive = 'resizes-visual' | 'resizes-content' | 'overlays-content'
2
3export interface Viewport {
4  width?: string
5  height?: string
6  initialScale?: number
7  minimumScale?: number
8  maximumScale?: number
9  userScalable?: 0 | 1 | 'yes' | 'no'
10  viewportFit?: 'auto' | 'contain' | 'cover'
11  interactiveSidget?: Interactive
12  interactiveWidget?: Interactive
13}
14
15export interface CSP {
16  defaultSrc?: Array<string>
17  scriptSrc?: Array<string>
18  styleSrc?: Array<string>
19  imgSrc?: Array<string>
20  mediaSrc?: Array<string>
21  fontSrc?: Array<string>
22  objectSrc?: Array<string>
23  childSrc?: Array<string>
24  connectSrc?: Array<string>
25  workerSrc?: Array<string>
26  manifestSrc?: Array<string>
27  baseUri?: Array<string>
28  frameAncestors?: Array<string>
29  formAction?: Array<string>
30  reportUri?: string
31}
32
33export type Referrer =
34  'no-referrer' |
35  'origin' |
36  'no-referrer-when-downgrade' |
37  'origin-when-cross-origin' |
38  'same-origin' |
39  'strict-origin' |
40  'strict-origin-when-cross-origin' |
41  'unsafe-URL'
42
43export interface htmlMetaOptions {
44  viewport?: Viewport
45  csp?: CSP
46  referrer?: Referrer
47  description?: string
48  keywords?: Array<string>
49  author?: string
50}