veaury
veaury copied to clipboard
gloriasoft
可否提供一份在React项目中使用Vue3组件的Vite配置文件
@Handpear 你是react的vite项目是吧？配置如下
vite.config.js
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [
react({
babel: {
exclude: [/\.vue$/]
}
}),
vue(),
vueJsx({
include: [/\.vue$/]
}),
]
})
App.jsx
import { applyVueInReact } from 'veaury'
import AAAVue from './AAA.vue'
const AAA = applyVueInReact(AAAVue)
function App() {
return <AAA/>
}
export default App
有办法解决吗
似乎 vite 失去了对 ts 的编译能力?
@Handpear
修改配置如下，记得安装@vue/babel-plugin-jsx
此配置会将.vue文件中的jsx以vuejsx解析，如果需要其他文件也进行vuejsx解析，在overrides.incluede里继续添加正则
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
react({
babel: {
// 预设vuejsx插件处于关闭状态
plugins: [['@vue/babel-plugin-jsx', false]],
overrides: [{
// 将vuejsx插件开启
include: [/vue&type=script&lang\.[tj]sx?$/],
plugins: ['@vue/babel-plugin-jsx']
}]
}
}),
]
})
@Handpear 升级到2.1.1版本
import { defineConfig } from 'vite'
// >= [email protected]
import veauryVitePlugins from 'veaury/vite'
export default defineConfig({
plugins: [
// 关闭 react plugin
// react(),
// 当type设置为react,
// 只有.vue文件中的jsx会被以vue jsx编译,
// 其他的文件中的jsx都会被以react jsx编译
veauryVitePlugins({
type: 'react'
})
]
})
@devilwjp 感谢，其实上一版的配置已经能用了，只不过Eslint把所有React jsx 都识别为了 Vue jsx，tsconfig文件肯定是需要两个的，设置不同的 jsx 模式，但 eslint 是需要通过 overrides 字段复写文件类型吗？
@Handpear
我最近回复的两个配置都能用的，最后一个配置只是把前一个配置包装了一下而已
是因为vueJsx插件会默认设置vite的esbuild的include为/.ts/，也就是只让esbuild只处理ts文件的typescript编译，其他文件都默认走vueJsx插件使用babel的ts插件，但是比较可惜的是vueJsx的vite插件并没后设置enforce为pre，导致优先级不如react插件（因为react插件设置了enforce为pre），所以正确的配置是依旧使用react插件，但是预先把@vue/babel-plugin-jsx插入到react插件的plugins里（优先级最高，但是设置为关闭），然后就通过overrides来做条件的匹配选择是否开启vue的jsx编译即可
@Candidade vue3引入react，如果你是webpack，参考一下我的文档关于webpack的部分，应该使用veaury的babel插件
@xiaobc1234 请直接使用veaury的vite插件
https://github.com/devilwjp/veaury#vite
我一开始是这么用的，但是报上面的错，换成第一种方式就正常：
"veaury": "^2.3.12"
export default defineConfig({
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
'/@': resolve(__dirname, './src'),
'@src': resolve(__dirname, './src'),
'@services': resolve(__dirname, './src/services'),
},
},
plugins: [
// veaury插件需要 关闭 vue 和 vuejsx 插件
// vue(),
// vueJsx(),
veauryVitePlugins({
type: 'vue',
}),
AutoImport({
dts: 'src/auto-imports.d.ts',
imports: ['vue', 'vue-router'],
eslintrc: {
enabled: true,
filepath: './.eslintrc-auto-import.json',
globalsPropValue: true,
},
}),
// https://github.com/jpkleemans/vite-svg-loader
svgLoader(),
// https://github.com/antfu/vite-plugin-components
Components({
extensions: ['vue'],
dts: 'src/components.d.ts',
deep: true,
dirs: ['src/components'],
resolvers: [
AntDesignVueResolver({
importStyle: false,
}),
],
}),
ViteFonts({
google: {
families: ['Open Sans', 'Montserrat', 'Fira Sans'],
},
}),
Unocss({
/* options */
}),
VueI18n({
include: [resolve(__dirname, './locales/**')],
}),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
// hack: `true; @import 'ant-design-vue/dist/antd.variable.less'`,
// '@primary-color': '#eb2f96', // 全局主色
},
},
},
},
optimizeDeps: {
include: [
'vue',
'vue-router',
'@vueuse/core',
'@ant-design/icons-vue',
'ant-design-vue/es',
'@ant-design-vue/pro-layout',
],
exclude: ['vue-demi'],
},
});
function configure(proxy, options) {
// 本地可直接走登录流程，无需手动设置cookie了。
proxy.on('proxyRes', function (proxyRes, req, res) {
console.log('proxy url: ', req.url);
if (proxyRes.headers['set-cookie']) {
proxyRes.headers['set-cookie'] = proxyRes.headers['set-cookie'].map(cookie => {
return cookie.replace(/domain\=.+?;/, '');
});
}
});
}
@xiaobc1234 你截图中的错，就是把react的jsx以vue的方式去解析了，你的react组件是放在什么目录下的，默认必须放在react_app目录下、
@xiaobc1234 你截图中的错，就是把react的jsx以vue的方式去解析了，你的react组件是放在什么目录下的，默认必须放在react_app目录下、
哦，我这没有react_app目录，组件是放在src/components/react-comp 下面的