# vite-html-insert

**Repository Path**: ctrlc-git/ctrlc-vite-html-insert

## Basic Information

- **Project Name**: vite-html-insert
- **Description**: 用于vue3在index.html注入css、js
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-20
- **Last Updated**: 2023-10-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vite, vue3

## README

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

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

## 使用手册

### 安装

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

### 语法

```JS
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`文件中引入插件：

```js
...
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'
        }
      ]
    })
 ],
})
```

## 文档

* [文档](https://gitee.com/ctrlc-git/ctrlc-vite-html-insert.git)