《Vite 基础知识》Vue3 之 JSX 配置

前言

Vue3 项目

• 使用 Vite 创建，默认不支持 JSX 语法，要单独设置；
• 使用 Vue CLI 创建，默认 支持 JSX 语法，内部已预置；

JSX 配置

Vite 推荐使用插件 @vitejs/plugin-vue-jsx；

安装

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

设置

vite.config.js 中加上代码第 4 和 9 行：

import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import VueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
    plugins: [ // 必有插件
        vue(),
        VueJsx()
    ],
})

补充

如果是 Vue2 Webpack 自动升级 Vue3 Vite 配置的插件有所不同！！！

保留了 Vue2 JSX 语法，应该使用插件vite-plugin-lang-jsx （github地址 或npmjs地址 ）；

否则会报错：

[vue/compiler-sfc]This experimental syntax requires enabling one of the following parser plugin(s): “jsx”, “flow”, “typescript”.
这种实验语法需要启用以下解析器插件之一：“jsx”、“flow”、“typescript”

安装

npm i vite-plugin-lang-jsx -D

设置

vite.config.js 中加上代码第 4 和 8 行：

import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import langJsx from 'vite-plugin-lang-jsx'

export default defineConfig({
    plugins: [ 
        langJsx(),// 必须在 vue 插件前
        vue()
    ],
    resolve: {
        alias: { // 路径别名
            "@": resolve(__dirname, 'src'),
        }
    }
})