vue知识点之Vite 报错“This experimental syntax requires enabling one of the following parser plugin(s): ‘jsx’ ”

一、报错

Vue2 Webpack 转 Vue3 Vite 报错：

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

下图 JSX 语法报错：

二、原因

缺少对 JSX 语法 的解析配置。Vite 不会自动设置，需要在 vite.config.js 中配置 JSX 插件！！！

三、解决方案

区分两种情况

⏰ 1. Vue2/Webpack 升级 Vue3/Vite

我遇到是此种情况，使用插件vite-plugin-lang-jsx （github地址 或npmjs地址 ）；

安装

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'),
        }
    }
})

⏰ 2. Vue3/Vite 项目设置 JSX

如果是 Vue3，Vite JSX 推荐使用 @vitejs/plugin-vue-jsx；

安装

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

设置

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

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: [ // 必有插件
        VueJsx(),
        vue()
    ],
    resolve: {
        alias: { // 路径别名
            "@": resolve(__dirname, 'src'),
        }
    }
})