vite中使用svg组件

安装svg依赖

npm install vite-plugin-svg-icons -D

在vite.config.ts中配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // 配置svg
import { resolve } from 'path'
export default defineConfig({
  plugins: [
    ...,
    createSvgIconsPlugin({
      iconDirs: [resolve(process.cwd(), 'src/assets/icons')],  // 这里写入你存放的svg路径
      symbolId: 'icon-[dir]-[name]',
    }),
  ]
})

在main.ts中引入

import 'virtual:svg-icons-register'

注册svg全局组件

可以参考我之前的vuecli2中的svg组件，这里就不写了

统一注册components下的组件

1. 在components下新建index.ts
2. 写入一下代码,

export default {
  install(vue) {
    // 批量导入当前文件所在目录下的.vue文件
    const options = import.meta.globEager('./*vue')

    Object.keys(options).forEach((key) => {
      const componentName = key.replaceAll('./', '').replaceAll('.vue', '')
      vue.component(componentName, options[key].default)
    })
  },
}

3. 这里讲一下，require在vite中是无法被识别的，因为webpack在启动项目时，它其实依赖的是node环境，但是vite是借助浏览器来帮助运行项目，而在浏览器中是无法识别node关键词的，例如require，process环境变量，还有一些内置模块。所以这里我们的导入依靠import.meta.globEager来导入，还有当我们配置一些vite中的环境变量时，要使用import.meta,env来判断当前环境。当然有个特例，vite.config.ts是在node环境执行的，所以可以写一些node代码, 后续会出一个vite中的环境变量。
4. 在main文件引入这个方法，去通过use去注册就好了。