常用插件

unplugin

import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { getSrcPath } from '../utils'

export default function unplugin(viteEnv: ImportMetaEnv) {
  const { VITE_ICON_PREFFIX, VITE_ICON_LOCAL_PREFFIX } = viteEnv

  const srcPath = getSrcPath()
  const localIconPath = `${srcPath}/assets/svg-icon`

  /** 本地svg图标集合名称 */
  const collectionName = VITE_ICON_LOCAL_PREFFIX.replace(
    `${VITE_ICON_PREFFIX}-`,
    '',
  )

  return [
    Icons({
      compiler: 'vue3',
      customCollections: {
        [collectionName]: FileSystemIconLoader(localIconPath, svg =>
          svg.replace(/^<svg\s/, '<svg width="1em" height="1em" '),),
      },
      scale: 1,
      defaultClass: 'inline-block',
    }),
    Components({
      dts: 'src/typings/components.d.ts',
      types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }],
      resolvers: [
        NaiveUiResolver(),
        IconsResolver({
          customCollections: [collectionName],
          componentPrefix: VITE_ICON_PREFFIX,
        }),
      ],
    }),
    createSvgIconsPlugin({
      iconDirs: [localIconPath],
      symbolId: `${VITE_ICON_LOCAL_PREFFIX}-[dir]-[name]`,
      inject: 'body-last',
      customDomId: '__SVG_ICON_LOCAL__',
    }),
  ]
}

组件自动导入

pnpm add unplugin-vue-components -D

import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [AntDesignVueResolver()],
    }),
  ],
})

API 自动导入

安装 unplugin-auto-import

pnpm add unplugin-auto-import -D

Vite 项目中自动导入 vue 和 vue-router 的 API

import AutoImport from 'unplugin-auto-import/vite'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router'],
    }),
  ],
})

导入三方库 API

import AutoImport from 'unplugin-auto-import/vite'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        {
          '@vueuse/core': [
            // named imports
            // import { useMouse } from '@vueuse/core',
            'useMouse',
            // alias
            // import { useFetch as useMyFetch } from '@vueuse/core',
            ['useFetch', 'useMyFetch'],
          ],
          'axios': [
            // default imports
            // import { default as axios } from 'axios',
            ['default', 'axios'],
          ],
        },
      ],
    }),
  ],
})

UnoCSS

pnpm add unocss -D

tailwind

pnpm add -D @unocss/preset-wind

import presetWind from '@unocss/preset-wind'

UnoCSS({
  presets: [presetWind()],
})

Tailwind 会自动获取根目录下 tailwind.config.js 作为配置文件

module.exports = {
  content: ['./src/**/*.{vue,html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 ESM 项目中，Tailwind 在 v2.0.3 版本之后会自动获取 tailwind.config.cjs 作为配置文件

VS Code 中安装 Tailwind CSS IntelliSense 插件

压缩

import ViteCompression from 'vite-plugin-compression'

export default (viteEnv: ImportMetaEnv) => {
  const { VITE_COMPRESS_TYPE = 'gzip' } = viteEnv
  return ViteCompression({ algorithm: VITE_COMPRESS_TYPE })
}

Mock

import { viteMockServe } from 'vite-plugin-mock'

export default (viteEnv: ImportMetaEnv) => {
  const prodMock = viteEnv.VITE_PROD_MOCK === 'Y'

  return viteMockServe({
    mockPath: 'mock',
    prodEnabled: prodMock,
    injectCode: `import { setupMockServer } from '../mock';\nsetupMockServer();\n`,
  })
}

pwa

import { VitePWA } from 'vite-plugin-pwa'

export default function setupVitePwa() {
  return VitePWA({
    registerType: 'autoUpdate',
    includeAssets: ['favicon.ico'],
    manifest: {
      name: 'SoybeanAdmin',
      short_name: 'SoybeanAdmin',
      theme_color: '#fff',
      icons: [
        {
          src: '/logo.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: '/logo.png',
          sizes: '512x512',
          type: 'image/png',
        },
        {
          src: '/logo.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'any maskable',
        },
      ],
    },
  })
}