如何在无需构建的Vue3独立浏览器版本中使用及编译JSX

一、无需构建在浏览器中使用Vue3 + JSX #

要直接在浏览器环境里用Vue3的JSX而不用构建工具，得借助Babel standalone实时编译JSX代码，具体步骤如下：

• 先在HTML中引入三个核心脚本：Vue3的全局构建版、Babel standalone编译脚本、Vue JSX转换插件的浏览器版本（均可从公开CDN源获取对应文件）：

  <script src="vue.global.js"></script>
  <script src="babel.min.js"></script>
  <script src="vue-babel-plugin-jsx.min.js"></script>
  

• 给包含JSX代码的<script>标签添加type="text/babel"属性，并配置Babel启用Vue的JSX插件：

  <script type="text/babel">
    // 注册Vue JSX插件到Babel
    Babel.registerPlugin('vue-jsx', VueJSX);
  
    const { createApp } = Vue;
  
    createApp({
      render() {
        // 直接编写JSX代码
        return <div>Hello, Vue3 JSX!</div>;
      }
    }).mount('#app');
  </script>
  

• 注意：这种方案仅适合快速原型验证或小型Demo，绝对不要用于生产环境——实时编译会带来明显的性能损耗，还会增加页面的加载体积。

二、Vue独立版的浏览器内编译器能否编译JSX？ #

完全不行。Vue独立版内置的浏览器内编译器，仅支持编译Vue的模板语法（比如<template>标签内的内容），没有处理JSX语法的能力。JSX是JavaScript的语法扩展，必须通过Babel这类工具将其转换为Vue可识别的h()函数调用（即渲染函数），才能被Vue实例处理。

内容的提问来源于stack exchange，提问作者Prince Godswill