Vue项目初始化时未启用JSX支持，后续如何手动开启？

不需要重新初始化项目，直接在现有项目中安装对应依赖、调整少量配置即可开启JSX支持，操作不会影响已有业务代码的正常运行。

分场景操作步骤 #

Vue 3 + Vite 构建项目 #

• 在项目根目录终端执行命令安装官方JSX插件：npm install @vitejs/plugin-vue-jsx -D
• 打开根目录下的vite.config.js/vite.config.ts配置文件，引入并注册插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入JSX插件
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx() // 注册JSX插件
  ]
})

• 终止当前运行的本地开发服务，重新执行启动命令拉起项目，控制台JSX相关警告就会消除，后续可正常使用JSX语法编写组件。

Vue 3 + Vue CLI（Webpack）构建项目 #

• 直接在项目根目录终端执行命令安装Babel插件：npm install @vue/babel-plugin-jsx -D
• 重启本地开发服务即可自动生效，无需手动修改额外配置。

Vue 2 项目 #

• 在项目根目录终端执行命令安装JSX相关依赖：npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props -D
• 打开根目录下的babel.config.js配置文件，在presets数组中新增JSX预设配置：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    '@vue/babel-preset-jsx' // 新增JSX预设
  ]
}

• 重启本地开发服务即可生效。

操作提示：如果担心配置修改出错，可提前备份package.json以及构建相关配置文件，上述操作均为官方标准配置流程，不会破坏原有项目的运行逻辑。

内容的提问来源于stack exchange，提问作者Vivek Hotti