不同于webpack等构建工具，Vite为Vue提供了第一优先级的支持。

Vite为Vue提供了开箱即用的官方插件：

• vitejs/plugin-vue --- 提供Vue 3 单文件支持
• vitejs/plugin-vue-jsx -- 提供Vue 3 jsx 支持
• vite-plugin-vue2 -- 提供Vue 2支持

vitejs/plugin-vue

注意：适用于Vue3

vitejs/plugin-vue 是官方提供的Vue3 单文件项目使用的插件。

官方github： https://github.com/vitejs/vite/tree/main/packages/plugin-vue

使用方法如下：

如果你使用官方提供的模板新建项目，可以跳过此安装步骤：

npm install @vitejs/plugin-vue -D

在vite.config.ts中，

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 其他配置参看 https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

同时，该插件还支持的可选配置项有：

export interface Options {
  //类似webpack中对于需要/不需要解析的路径匹配
  include?: string | RegExp | (string | RegExp)[]
  exclude?: string | RegExp | (string | RegExp)[]

  ssr?: boolean
  isProduction?: boolean

  /**
   * 将vue的单文件组件编译为dom结构 (要求 Vue >= 3.2.0)
   * - `true` -> 将所有的 `*.vue` 引入编译为dom结构
   * - `string | RegExp` -> 按照该正则匹配文件，并将其编译为dom结构
   *
   * @default /.ce.vue$/
   */
  customElement?: boolean | string | RegExp | (string | RegExp)[]

  /**
   * 允许Vue ref转换 (实验中的配置).
   * https://github.com/vuejs/vue-next/tree/master/packages/ref-transform
   *
   * **注意 Vue >= 3.2.5**
   *
   * - `true`: transform will be enabled for all vue,js(x),ts(x) files except
   *           those inside node_modules
   * - `string | RegExp`: apply to vue + only matched files (will include
   *                      node_modules, so specify directories in necessary)
   * - `false`: disable in all cases
   *
   * @default false
   */
  refTransform?: boolean | string | RegExp | (string | RegExp)[]

  // options to pass on to vue/compiler-sfc
  script?: Partial<SFCScriptCompileOptions>
  template?: Partial<SFCTemplateCompileOptions>
  style?: Partial<SFCStyleCompileOptions>
}

需要自定义配置时的示例：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 其他配置参看 https://github.com/vitejs/vite/tree/main/packages/plugin-vue
export default defineConfig({
  plugins: [vue({
    isProduction: true  
  })]
})

该配置类似于在webpack中，配置对.vue文件的解析loader。

vitejs/plugin-vue-jsx

注意：适用于Vue3

安装：

npm install  @vitejs/plugin-vue-jsx -D

使用示例， vite.config.js文件中配置如下：

import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    })
  ]
}

关于JSX详细配置请参看下篇文章。

vite-plugin-vue2

注意：适用于Vue2

官方文档：https://github.com/underfin/vite-plugin-vue2

安装：

npm install  @vitejs/plugin-vue-vue2 -D

使用示例， vite.config.js文件中配置如下：

import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [
    createVuePlugin(/* options */)
  ],
}

可选的配置项有：

• vueTemplateOptions

数据类型： Object

默认值： { compilerOptions :{ whitespace: 'condense' } }

compilerOptions 配置项是用来配置压缩模式的。 { whitespace: 'condense' } 意味着如果有单独的换行，将会被删除，如果存在多个连续空格，将会被压缩到一个空格。

如果你不希望这样编译代码，可以设置{ whitespace: 'preserve' }

• jsx true/false 用来配置是否需要支持jsx的编译
• jsxOptions jsx代码的babel编译配置项
• target string 配置esbuild的编译脚本方式