(已解决) Vite中编译JSX时在后缀(.vue)单文件报错原因

2024-06-08 08:49| 来源: 网络整理| 查看: 265

原因:

Vite在启动时会做依赖的预构建预构建，运行时默认都只会对jsx与tsx做语法转换。不会对.js文件做jsx的语法转换。

解决方法一：（不推荐）

把.vue后缀文件更改为.jsx 或 .tsx文件就可以执行

解决方法二: （推荐！）

.vue文件的script标签加上lang='jsx' 或 lang='tsx'就可以解析vue文件

首先要确保你已经安装了解析jsx的plugin: @vitejs/plugin-vue-jsx

vite.config.js 配置文件配置plugin

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from "@vitejs/plugin-vue-jsx" export default defineConfig({ plugins: [ vue(), vueJsx({ // 这里可以配置其他的选项 }) ] })

App.jsx

// 1. Vite在启动时会做依赖的预构建 // 2. 预构建，运行时默认都只会对jsx与tsx做语法转换。不会对js做jsx的语法转换。 export default { data() { return { counter: 0 } }, render() { const increment = () => this.counter++ const decrement = () => this.counter-- return ( 当前计数: {this.counter} decrement}>-1 ) }, }

App.vue 在script标签加上 lang='jsx'属性

lang='jsx'属性 export default { data() { return { counter: 0 } }, render() { const increment = () => this.counter++ const decrement = () => this.counter-- return ( script标签要加上lang='jsx'才能解析当前计数: {this.counter} decrement}>-1 ) }, }

【本文地址】

公司简介

联系我们