🚀🚀🚀这几个为 vue 设计的 vite 插件，你一定要知道！

前言

前面几天陆陆续续介绍了二十多个广受好评的 vite 插件，今天我们围绕 vue 再来介绍一些插件吧！

往期精彩推荐

🚀🚀🚀这些高效实用的 vite 插件你一定要知道！更新弹窗、mock数据、开发快捷键、自动导入...
🚀🚀🚀 尤雨溪宣布 Vite 发布 Rolldown-Vite 预览版，性能超级快！⚡️⚡️⚡️
苏醒吧，Remix！好消息，Remix将基于Preact 重构，更快更轻量！🚀🚀🚀
更多精彩文章欢迎关注我的公众号：萌萌哒草头将军

正文

Vite 以其快速的开发体验和强大的插件生态系统成为 Vue 开发者的首选工具。无论是提升 Vue 2 项目的现代化能力，还是优化 Vue 3 项目的开发效率，Vite 插件都能提供强大支持！

`unplugin-vue2-script-setup`

unplugin-vue2-script-setup 允许在 Vue 2 项目中使用 Vue 3 的 <script setup> 语法，简化组件定义并支持 Composition API。由于 Vue 2.7 已内置此功能，该插件主要适用于 Vue 2.6 或更早版本的项目，目前处于维护模式。

bash 复制代码

npm install -D unplugin-vue2-script-setup
npm install @vue/composition-api

在 vite.config.ts 中：

javascript 复制代码

import { defineConfig } from 'vite';
import { createVuePlugin as Vue2 } from 'vite-plugin-vue2';
import ScriptSetup from 'unplugin-vue2-script-setup/vite';

export default defineConfig({
  plugins: [
    Vue2(),
    ScriptSetup({ /* options */ }),
  ],
});

开发者可以在 Vue 2 项目中使用 <script setup> 语法，简化代码结构，提高可读性，便于向 Vue 3 迁移。

`vite-plugin-vue-gql`

vite-plugin-vue-gql 允许在 Vue SFC 中使用 <gql> 标签定义 GraphQL 查询、变更和订阅。

bash 复制代码

npm install -D vite-plugin-vue-gql
npm install @urql/vue graphql

在 vite.config.ts 中：

javascript 复制代码

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import Vql from 'vite-plugin-vue-gql';

export default defineConfig({
  plugins: [Vue(), Vql()],
});

这样就可以将 GraphQL 查询整合到 Vue SFC 中，保持代码整洁。

vue 复制代码

<script setup lang="ts">
import { ref } from 'vue'
import { useQuery } from 'vql'

const name = ref('Evan')
const { data } = useQuery({ variables: { name } })
</script>

<template>...</template>

<gql>
query($name: String!) {
  user(name: $name) {
    username
  }
}
</gql>

`vite-plugin-md`

vite-plugin-md 允许将 Markdown 文件作为 Vue 组件导入，同时支持在 Markdown 中嵌入 Vue 组件，适合文档密集型项目。

bash 复制代码

npm install vite-plugin-md -D

在 vite.config.js 中：

javascript 复制代码

import Vue from '@vitejs/plugin-vue';
import Markdown from 'vite-plugin-md';

export default {
  plugins: [
    Vue({ include: [/\.vue$/, /\.md$/] }),
    Markdown(),
  ],
};

这样配置后， Markdown 文件可作为 Vue 组件使用，支持动态内容和组件复用，适合文档站或内容管理系统。

`vite-plugin-markdown-mermaid`

vite-plugin-markdown-mermaid 允许在 Markdown 文件中使用 Mermaid 图表，支持多种格式导入，如 HTML 和 Vue 组件。

bash 复制代码

npm install -D vite-plugin-markdown-mermaid

在 vite.config.js 中：

javascript 复制代码

import { defineConfig } from 'vite';
import MarkdownMermaid from 'vite-plugin-markdown-mermaid';

export default defineConfig({
  plugins: [MarkdownMermaid()],
});

Markdown 文件中的 Mermaid 图表可直接渲染，增强文档的交互性和可视化能力。

`unplugin-svg-component`

unplugin-svg-component 将 SVG 文件转换为 Vue 或 React 组件，支持 HMR、Tree-shaking 和 TypeScript 提示。

bash 复制代码

npm install unplugin-svg-component -D

在 vite.config.ts 中：

javascript 复制代码

import { defineConfig } from 'vite';
import { UnpluginSvgComponent } from 'unplugin-svg-component/vite';

export default defineConfig({
  plugins: [UnpluginSvgComponent({ /* options */ })],
});

SVG 文件可作为 Vue 或 React 组件使用，支持热更新和优化，适合跨框架项目。

`vite-plugin-style-vw-loader`

vite-plugin-style-vw-loader 将 Vue 组件中的内联样式 px 单位转换为 vw 单位，方便响应式设计。

bash 复制代码

npm install vite-plugin-style-vw-loader -D

在 vite.config.js 中：

javascript 复制代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vitePluginStyleVwLoader from 'vite-plugin-style-vw-loader';

export default defineConfig({
  plugins: [vitePluginStyleVwLoader(), vue()],
});

这样配置后内联样式中的 px 单位自动转换为 vw，简化响应式布局开发。

`vite-ssg`

vite-ssg 是一个用于 Vue 3 的静态站点生成（SSG）插件，支持多页和单页应用。

bash 复制代码

npm install -D vite-ssg vue-router @unhead/vue

在 vite.config.ts 中：

javascript 复制代码

import { defineConfig } from 'vite';
import { ViteSSG } from 'vite-ssg';
import App from './App.vue';

export const createApp = ViteSSG(
  App, 
  { routes },
  ({ app, router, routes, isClient, initialState }) => {
    // 安装插件等
  }
);

支持静态站点生成，适合部署到静态服务器的 Vue 3 应用。

`unplugin-vue-components`

unplugin-vue-components 支持 Vue 2 和 Vue 3 的组件和指令自动导入，减少手动导入的麻烦。

bash 复制代码

npm install unplugin-vue-components -D

在 vite.config.ts 中：

javascript 复制代码

import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [Components()],
});

自动导入和注册组件，减少代码冗余，提高开发效率。

详细的配置可以看这里：https://github.com/unplugin/unplugin-vue-components

`vite-plugin-vue2-suffix`

vite-plugin-vue2-suffix 解决从 Webpack 迁移到 Vite 时 Vue 2 组件缺少 .vue 后缀的问题。

bash 复制代码

npm install vite-plugin-vue2-suffix -D

在 vite.config.js 中：

javascript 复制代码

import { createVuePlugin } from 'vite-plugin-vue2';
import VitePluginVue2Suffix from 'vite-plugin-vue2-suffix';

export default {
  plugins: [createVuePlugin(), VitePluginVue2Suffix()],
};

这样就可以自动为组件导入添加 .vue 后缀，简化迁移过程。

`vite-plugin-vue-static-sfc`

vite-plugin-vue-static-sfc 将 .vue 文件作为静态资产服务，适用于静态网站。

bash 复制代码

npm install vite-plugin-vue-static-sfc

在 vite.config.js 中：

javascript 复制代码

import staticVuePlugin from 'vite-plugin-vue-static-sfc';

export default {
  plugins: [staticVuePlugin()],
};

配置后支持将 .vue 文件作为静态文件服务，适合静态网站开发。

`vite-plugin-vue-nested-sfc`

vite-plugin-vue-nested-sfc 允许在 Vue SFC 中嵌套其他 SFC，提高组件模块化。

bash 复制代码

npm install -D vite-plugin-vue-nested-sfc

在 vite.config.js 中：

javascript 复制代码

import vue from '@vitejs/plugin-vue';
import vueNestedSFC from 'vite-plugin-vue-nested-sfc';

export default {
  plugins: [vue(), vueNestedSFC()],
};

启动之后支持嵌套 SFC，提高组件组织性和可重用性。

`vite-plugin-vue-style-in-template`

vite-plugin-vue-style-in-template 从 Vue 组件模板中提取 <style> 标签，适用于特殊样式需求。

bash 复制代码

pnpm install vite-plugin-vue-style-in-template

在 vite.config.js 中：

javascript 复制代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleInTemplate from 'vite-plugin-vue-style-in-template';

export default defineConfig({
  plugins: [vue(), styleInTemplate()],
});

配置后支持在模板中定义样式并提取，适合动态或条件样式场景。

最后

这 16 个 Vite 插件为 Vue 项目提供了从组件自动导入到静态站点生成的全面支持，涵盖了 Vue 2 和 Vue 3 的多种开发需求。这些插件不仅提升了开发效率，还优化了调试和部署流程。希望本文能帮助开发者快速掌握这些工具，并在 Vue 项目中灵活运用！

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！

往期精彩推荐

🚀🚀🚀这些高效实用的 vite 插件你一定要知道！更新弹窗、mock数据、开发快捷键、自动导入...
🚀🚀🚀 尤雨溪宣布 Vite 发布 Rolldown-Vite 预览版，性能超级快！⚡️⚡️⚡️
苏醒吧，Remix！好消息，Remix将基于Preact 重构，更快更轻量！🚀🚀🚀
更多精彩文章欢迎关注我的公众号：萌萌哒草头将军