请注意这是一个脚本, 不是vite的插件, 这个脚本用于解决在Vue2 + Webpack的项目迁移至Vite的时候, Vite无法识别JSX语法的场景.

具体抛错信息如下:

[Vite] The JSX syntax extension is not currently enabled

目前该抛错一下的解决办法:

1. vite配置文件加上该plugin(对我无用)

vite.config.js => plugins: [createVuePlugin({ jsx: true })]

2. 如果是在js文件中带有jsx语法, 则将改为.jsx扩展名文件

.js(has jsx) => .jsx

3. 如果是在.vue文件中带有jsx语法, 则在script标签下增加该标识

.vue(has jsx) => <script lang="jsx">

如果你的文件特别少的话就可以手动通过上述更改解决, 无需下载本脚本. 如果你需要更改的文件同我一样, 有成百上千个, 那本脚本就可以帮你自动添加了.

resolve

<script>
export default {
    methods: {
        demo() {
            return (
                <div>test</div>
            )
        }
    }
}
</script>

to

<script lang="jsx">
export default {
    methods: {
        demo() {
            return (
                <div>test</div>
            )
        }
    }
}
</script>

Usage

本脚本将一次性为带有jsx语法, 并以.vue解决的文件中的script标签自动加上 lang="jsx"

$ npm i vite-vue2-script-jsx

在你项目的入口文件内, 引入该脚本, 并给它传入你需要处理的文件夹绝对路径

// index.js
import vue2JSX from 'vite-vue2-script-jsx'
import { fileURLToPath } from 'url'
import path from 'path'
// 拿到当前文件的文件夹
const absolutePath = fileURLToPath(import.meta.url)
const basename = path.basename(absolutePath)
const aimPath = absolutePath.replace(`/${basename}`, '')
const aimFolder = aimPath + '/example'

vue2JSX({
    basePath: aimFolder, 
    includes: ['view', 'components']
})

参数介绍

|Name|Description|Default |---|---|---| |basePath|required string需要处理的文件夹绝对路径|null| |includes| array 只处理该文件夹内的哪些文件夹|[]|

因为src文件夹下可能有很多无须处理的文件夹, 所以传入第二个参数, 可以提高效率.

请注意这个插件将会实际的变更你的文件, 所以最好清空一下工作区, 方便看到执行后被变更的文件