Vue 项目配置

Vite 对 Vue 3 提供开箱即用支持，通过官方插件配置增强功能。

基础 Vue 配置

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

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

Vue JSX 支持

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

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

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

Vue 插件选项

export default defineConfig({
  plugins: [
    vue({
      include: [/\.vue$/],
      isProduction: false,
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('x-')
        }
      }
    })
  ]
})

插件选项说明

Vue JSX 配置

export default defineConfig({
  plugins: [
    vueJsx({
      // JSX 配置选项
      isCustomElement: (tag) => tag.startsWith('x-')
    })
  ]
})

自定义元素支持

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // 将 x- 开头的标签视为自定义元素
          isCustomElement: (tag) => tag.startsWith('x-')
        }
      }
    })
  ]
})

注意：Vue 3 默认支持单文件组件，无需额外配置。

Vue 项目依赖

npm add vue
npm add -D @vitejs/plugin-vue

Vue 单文件组件示例

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

<style scoped>
button {
  color: blue;
}
</style>

要点总结

• @vitejs/plugin-vue 支持 Vue 3
• vueJsx 插件支持 JSX 写法
• template.compilerOptions 自定义编译选项
• isCustomElement 配置自定义元素