前端埋点插件有哪些（前端埋点插件有哪些）

科技前沿 • 2025-05-27 14:52 • 阅读 39

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg>

讯享网

vue3 等插件 hooks 自动引入

支持等自动引入

效果

讯享网

安装

vite.config.ts

讯享网

组件自动按需导入。

安装：

vite.config.ts

讯享网

原先引用组件的时候需要在目标文件里面 import 相关组件，现在就可以直接使用无需在目标文件 import 了，注意大小写，组件都是大写开始的。

当你使用 unplugin-vue-components 来引入 ui 库的时候，message, notification，toast 等引入样式不生效。

安装 vite-plugin-style-import，实现 message, notification，toast 等引入样式自动引入

安装：

vite.config.ts

讯享网

注释部分为常用的 UI 组件库，按照自己的需要引入。

setup 语法糖 name 增强，使 vue3 语法糖支持 name 属性。

vue3 语法糖默认是没有 name 属性的，在我们使用 keep-alive 的时候需要用到 name。

安装

vite.config.ts

讯享网

使用

用于生成 svg 雪碧图，方便在项目中使用文件。

按照文档配置好后，搭配阿里巴巴矢量图标库使用，只需把下载好的 svg 文件丢到指定目录，然后就可以项目中愉快的使用了。

安装：

讯享网

vite.config.ts 配置

main.ts 添加

讯享网

新建 svgIcon.vue

在目录 src 下新建 svg 文件夹，在阿里巴巴矢量图标库下载 order.svg 图标，放入 svg 文件夹内。

使用：

讯享网

一个针对 index.html，提供压缩和基于 ejs 模板功能的 vite 插件。

通过搭配文件，可以在开发或构建项目时，对 index.html 注入动态数据，例如替换网站标题。

安装：

index.html

讯享网

vite.config.ts

讯享网

使用或者来压缩资源。

安装

讯享网

vite.config.ts

打包压缩图片

安装

讯享网

国内用户安装需要在电脑 host 文件（C：WindowsSystem32driversetc）上加下以下配置：

我自己安装的时候发现还是不行，然后还是选择了他不推荐的 cnpm 安装成功了 - -

我发现我的 4M 图片压缩后，文件被旋转了 90 度，这？

讯享网

此插件是可以让我们很方便高效的使用 Iconify 中所有的图标（本人表示没有用过…）。

此插件支持在 vue3 中使用 jsx/tsx 语法

安装

vite.config.ts

讯享网

通过监听文件修改，自动重启 vite 服务。

最常用的场景就是监听和文件，我们知道，修改 vite 配置文件和环境配置文件，是需要重启 vite 才会生效，通过这个插件，我们将从反复重启中解脱出来。

安装

讯享网

配置：vite.config.ts

Vite 默认的浏览器支持基线是原生 ESM。该插件为不支持原生 ESM 的传统浏览器提供支持。

vite 支持 vue 开发

自动导入图像，同级目录的文件名不能重复！

安装

讯享网

vite.config.ts

假设有以下文件及路径

logo.png： src/assets/logo.png

name1.jpg： src/assets/test/name1.jpg

使用方式：

讯享网

插件将转换为：

unplugin-auto-import 插件的继承者，解决因为它的自动导入导致的 eslint 报错

安装

讯享网

main.ts 添加

前端埋点插件有哪些（前端埋点插件有哪些）

相关推荐