Vue3.0教程 （七）.vite插件

vite插件的使用

一、安装依赖

npm i -D unplugin-auto-import

二、创建文件

// 和src平级
vite/plugins // 目录

三、创建index.js

import vue from '@vitejs/plugin-vue'
import createAutoImport from './auto-import' // 引用插件
export default function createVitePlugins(viteEnv, isBuild = false) {
  const vitePlugins = [vue()]
  vitePlugins.push(createAutoImport())
  // isBuild && vitePlugins.push(...createCompression(viteEnv))
  return vitePlugins
}

四、auto-import.js

// 减少每一个页面都需要引用一些参数 
// 咧入这些常用的
// import {ref,computed} from 'vue';
import autoImport from 'unplugin-auto-import/vite'

export default function createAutoImport() {
  return autoImport({
      imports: [
          'vue',
          'vue-router',
          'pinia'
      ],
      dts: false
  })
}

五、在vite.config.js 使用插件

// 引入vite插件
import createVitePlugins from './vite/plugins'

// 使用插件
export default defineConfig({
  plugins:createVitePlugins(),
})