vue项目中配置svg阿里图标库的使用(vite)

2,375 阅读1分钟

我是跟着硅谷甄选的文档做的但是报错了

硅谷甄选文档如下

安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D

vite.config.ts中配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

入口文件导入

import 'virtual:svg-icons-register'

按照如上的方法配置之后首先会报错: Internal server error: Failed to resolve import "virtual:svg-icons-register" from "src\main.ts". Does the file exist?

解决步骤:

  1. 根据上面的这个报错百度的话没找到解决办法之后试着重启项目才找到了解决的方法
  2. 重新启动项目之后会报下面错误

微信截图_20230626003935.png 3.我们执行安装命令,安装fast-glob依赖

 npm i fast-glob -D  

4.这时候我们的项目就可以成功启动了