如何让create-vue像VueCLI一样正常解析JSX

问题原因 #

create-vue基于Vite构建，默认情况下@vitejs/plugin-vue只处理.vue文件中的常规Vue语法，而@vitejs/plugin-vue-jsx仅负责解析.jsx/.tsx文件，不会主动处理.vue文件内的JSX代码，这就是你遇到Unexpected token '<'语法错误的原因。而VueCLI的vue-loader默认集成了JSX解析能力，所以之前能正常运行。

解决方案 #

方案一：修改.vue文件的script标签类型 #

在包含JSX的.vue文件中，将script标签的lang属性设置为jsx（使用TypeScript则设为tsx）：

<script lang="jsx">
export default {
  setup() {
    const x = <div>Hi all</div>;
    return () => x;
  }
}
</script>

这样Vite会自动调用vueJsx插件解析该script标签内的JSX代码。

方案二：配置@vitejs/plugin-vue全局支持.vue文件中的JSX #

如果不想逐个修改文件的script标签，可以在vite.config.js中给vue插件添加配置，让它解析.vue文件的script时启用JSX语法支持：

针对JavaScript项目：

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vue({
      script: {
        parserPlugins: ['jsx'] // 启用JSX解析插件
      }
    }),
    vueJsx()
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

针对TypeScript项目：

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vue({
      script: {
        parserPlugins: ['jsx', 'typescript'] // 同时启用JSX和TypeScript解析
      }
    }),
    vueJsx()
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

配置完成后重启Vite服务，.vue文件中的JSX就能正常被解析了。

内容的提问来源于stack exchange，提问作者Black Beard