@ctrlc/vite-plugin-vue-html-insert NPM

`@ctrlc/vite-plugin-vue-html-insert`

用于vue3在index.html注入css、js

使用手册

安装

npm i @ctrlc/vite-plugin-vue-html-insert -D

语法

vueHtmlInsert(Options)

配置项

参数	类型	说明
Options.css	string \| insertItem	文件路径或对象
Options.js	string \| insertItem	文件路径或对象
insertItem.hash	boolean	是否增加哈希值
insertItem.injectTo	'head' \| 'body' \| 'head-prepend' \| 'body-prepend'	插入的位置 css 默认head，js 默认body
insertItem...attrs	undefined	可扩展的属性

示例

在vite.config.ts文件中引入插件：

...
import vue from '@vitejs/plugin-vue'
import vueHtmlInsert from '@ctrlc/vite-plugin-vue-html-insert';

export default defineConfig({
  plugins: [
    vue(), 
    vueHtmlInsert({
      css: [
        // 插入xxx.css
        'xxx.css', 
        // 插入'yyy.css
        {
          href: 'yyy.css',
          hash: true,
          injectTo: 'head'
        }
      ],
      js: [
         // 插入xxx.js
        'xxx.js', 
        // yyy.js
        {
          src: 'yyy.js',
          hash: true,
          injectTo: 'body'
        }
      ]
    })
 ],
})