四、Vite构建打包优化 前置工具 rollup官网:https://cn.rollupjs.org/configuration-options/#manualchunks 安装插件rollup-plugin-visualizer它是一个打包体积分析插件,对应webpack中的webpack-bundle-analyzer,可以看到打包后的所有文件大小 rollupOptions 对象允许配置 Rollup 的大多数核心选项,常见的有: input - 输入文...
您可以尝试禁用代码压缩,或者在代码压缩之前将 SVG 文件转换为 Base64 编码的字符串,以避免这个问题。 Webpack 配置问题:如果您使用 Webpack 进行打包,可能需要配置相应的 loader,以支持 SVG 图标的加载和渲染。您可以检查 Webpack 配置文件中是否包含 SVG 文件的 loader,并确保其正确配置。您可以参考 Webpack 的...
组件库打包后有一个_virtual文件夹,图标在这里。vitepress 本地dev可以看到,是它启动一个devserver,服务可以去查找import 'virtual:svg-icons-register' build不行,是因为vitepress将所有内容打包到app.[hash].js文件中,而图标文件未被打包。 可在theme/index.ts文件中主动动态导入一下即可。import (you-element/_v...
Vite是一个基于浏览器原生ES模块依赖解析和打包工具的构建工具。它的核心特点是快速的热重载和冷启动速度。在Vite中,vite-plugin-svg-icons是一个非常实用的插件,它可以将SVG图标转换为Vue组件并自动导入。 1. SVG图标的优势 SVG(可缩放矢量图形)是一种基于XML的矢量图像格式,它适用于各种不同分辨率的屏幕,并且可以...
本地运行并打包成功,在服务器上报错,打开package.json查看依赖的版本号: vite-plugin-svg-icons版本号被修改了,此版本过低导致报错。 原因是服务器上的npm没有装淘宝镜像。 解决: 安装淘宝npm(cnpm) npm install -g cnpm --registry=https://registry.npm.taobao.org ...
如果在打包部署之后 SVG 图标不渲染,但是在开发环境中可以看到图标,可能是以下几个参数配置不对: 1. iconfont 插件:确保已经安装了 iconfont 插件,并且在项目中正确配置了 iconfont 的路径。可以通过在 vite.config.js 中添加 plugin 配置来启用该插件: 2. import { defineConfig } from 'vite'; import { creat...
如果在打包部署之后 SVG 图标不渲染,但是在开发环境中可以看到图标,可能是以下几个参数配置不对: 1. iconfont 插件:确保已经安装了 iconfont 插件,并且在项目中正确配置了 iconfont 的路径。可以通过在 vite.config.js 中添加 plugin 配置来启用该插件: 2. import { defineConfig } from 'vite'; import { creat...