Vue和Electron分离开发，一起打包

分别安装Vue和Electron

参照地址：
https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
https://www.electronforge.io/

npm init vue@latest
npm init electron-app@latest my-app -- --template=webpack-typescript

配置文件

1. 配置Vue

修改vite.config.ts文件

export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
base: './'  // 新增配置(解决绝对路径导致HTML请求文件失败的问题)
})

2. 配置Electron

修改src/index.ts文件

// 用于Vue开发环境
if(process.env.npm_lifecycle_event === 'start'){
mainWindow.loadURL('http://localhost:5173');// 地址根据实际运行的修改
} else {
mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
}

打包

1. 打包Vue

npm run build

2. 复制dist文件夹到Electron项目根目录
3. 修改Electron配置文件

修改forge.config.ts文件

const config: ForgeConfig = {
packagerConfig: {},
rebuildConfig: {},
makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
plugins: [
new WebpackPlugin({
mainConfig,
renderer: {
config: rendererConfig,
entryPoints: [
{
html: './dist/index.html',// 修改为dist下的index.html
js: './src/renderer.ts',
name: 'main_window',
preload: {
js: './src/preload.ts',
},
},
],
},
}),
],
};

修改dist/index.html
注释掉script和link两行数据

修改src/renderer.ts
将刚才注释的两行内容的js和css引入到文件中

4. 打包Electron

npm run package