您现在的位置是:首页 >技术交流 >跟着满哥学vue(vite配置electron篇)网站首页技术交流

跟着满哥学vue(vite配置electron篇)

番茄爱炒蛋l 2025-04-08 00:01:02
简介跟着满哥学vue(vite配置electron篇)

直接空降小满zs(Vue3 Vite electron 开发桌面程序)
谈谈我遇到的坑(2025-2-9)
1.由于vite是基于esm,所以直接使用commonJS的require会报错
在这里插入图片描述
使用import代替require即可解决问题

const initElectron = async () => {
    //使用esbuild编译Typescript代码为Javascript
    //@ts-ignore
    const esbuild = await import('esbuild')
    esbuild.buildSync({
        entryPoints: ['src/background.ts'],
        bundle: true,
        outfile: 'dist/background.js',
        platform: 'node',
        target: 'node12',
        external: ['electron']
    })
}

这个报错也是因为vite不会打包commonJS的文件,所以需要指定打包版本为esm,在buildSync添加format:'esm’即可
在这里插入图片描述

const initElectron = async () => {
    //使用esbuild编译Typescript代码为Javascript
    //@ts-ignore
    const esbuild = await import('esbuild')
    esbuild.buildSync({
        entryPoints: ['src/background.ts'],
        bundle: true,
        outfile: 'dist/background.js',
        platform: 'node',
        format:"esm",
        target: 'node12',
        external: ['electron']
    })
}
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。