vite-plugin / vite-plugin-lang-jsx Goto Github PK

vite-plugin-lang-jsx 使用报Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

Can't seem to work with @vitejs/plugin-vue2-jsx

插件用最新版1.4.1就会导致vite启动后一直进不去页面,document加载一直处于挂起状态,浏览器控制台无任何报错,什么打印都没有
就像这样

我换成以前的版本1.3.3就正常启动了

我是在vue-element-admin的基础上配置的
方法如下

注意 使用了jsx语法的vue文件需要在<script>加上lang="jsx"
package.json

"scripts": {
"vite": "vite"
},
"dependencies": {
"@vue/composition-api": "1.6.2"
},
​
"devDependencies": {
"@originjs/vite-plugin-commonjs": "1.0.3",
"@originjs/vite-plugin-require-context": "1.0.9",
"unplugin-vue2-script-setup": "0.11.0",
"vite": "2.9.9",
"vite-plugin-html-template": "1.1.4",
"vite-plugin-lang-jsx": "1.3.3",
"vite-plugin-vue2": "2.0.1",
},

main.js

import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

vite.config.js

import {defineConfig} from 'vite'
import {createVuePlugin} from 'vite-plugin-vue2'
import {viteCommonjs} from "@originjs/vite-plugin-commonjs"
import langJsx from 'vite-plugin-lang-jsx';
import ScriptSetup from 'unplugin-vue2-script-setup/vite'
import htmlTemplate from 'vite-plugin-html-template'
import ViteRequireContext from '@originjs/vite-plugin-require-context'
import {join} from 'path'

export default defineConfig({
define: {
'process.env': process.env
},
plugins: [
createVuePlugin({
jsx: true,
jsxOptions: { //配置jsx
compositionAPI: true
}
}),
langJsx(), //启用jsx
viteCommonjs({ //require引入转换成import引入
skipPreBuild: true
}),
ScriptSetup({ /* options */}), //使用
htmlTemplate({ //vite 默认使用根目录下的 index.html,将路径改到public目录下
pages: {
index: {
template: './public/index.html'
}
}
}),
ViteRequireContext() //Support require.context in vite.
],
resolve: {
extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
alias: [
// 适配 @xxxx、@/xxxx
{find: '@', replacement: join(__dirname, 'src')},
{find: '~@', replacement: join(__dirname, 'src')}
]
},
css: {
preprocessorOptions: {
scss: { //配置全局scss文件
sourceMap: false,
additionalData(source, fp) {
// All scss files ending with index.scss
// will not re-import additionalData
if (fp.endsWith('index.scss')) return source;
// Use additionalData from legacy nuxt scss options
return @import "@/styles/index.scss"; ${source}
}
}
}
},
server: {
host: true,
port: 9534,
open: false, //启动后不自动打开
proxy: {

}

},
})

问题： build的时候报错，如

配置：
vite: 3.2.5
vite-plugin-lang-jsx: 1.4.2
vite-plugin-vue2: 2.0.3