已存在Vue3项目打包Electron桌面版

记录一次将已完成开发的Vue+Vite开发的网页版打包成Electron的桌面版本,Windows的桌面安装程序。
是在 https://github.com/electron-vite/electron-vite-vue 库的参考下完成的,将此库的文件复制到原本存在的项目中完成打包。
步骤如下:

  • electron-vite-vue 拷贝到本地
  • electron-vite-vue 项目中的electron文件夹electron-builder.json5拷贝到已存在项目根目录下
  • 修改已存在项目的 package.jsondevDependencies 下面添加 "electron": "^26.0.0","electron-builder": "^24.6.3","vite-plugin-electron": "^0.15.3","vite-plugin-electron-renderer": "^0.14.5"(截至2023/11/15)
  • 修改已存在项目的 package.json 的scripts里添加 "dev-electron":"vite",如果已经添加则不需要
  • 在修改了 package.json 之后运行命令 npm install ,如果运行出现electron报错,那么将C:\Users\DELL.npmrc(DELL表示你当前电脑的用户名)添加下面几行代码
    ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
    registry=https://registry.npm.taobao.org/
    disturl=https://npm.taobao.org/mirrors/node
  • 此时然后在项目下继续运行 npm install 完成依赖包的安装
  • 修改 vite.config.js 文件夹,将 electron-vite-vue 中的内容拷贝到已存在项目,然后修改 vite.config.js 里面的server字段更改为之前项目的服务器地址代理
  • 修改 vite.config.js 中resolve下面添加 alias: [{find: '@/',replacement: REPLACEMENT },{find: 'src/', replacement: REPLACEMENT },{find: /^~@\//, replacement: REPLACEMENT}] 用于替换原本项目中使用了 @ 引用路径
  • 完成安装之后先运行 node ./scripts/build.js 命令将项目打包到 dist 文件夹里面,这是原有项目的打包文件,用来给electron进行调用
  • 运行 vite 开启electron项目
    上面的步骤就是将 electron-vite-vue 的文件添加到原有项目并做了修改来运行electron桌面版本,下面就开始使用electron-builder进行打包的步骤,有了上面的修改支撑,主要是electron-builder在打包时候因为网络问题导致部分内容无法下载因此无法完成打包。
  • 如果出现了类似 winCodeSign 无法下载的情况,那么可以将出现错误的链接放到浏览器里面直接进行下载,下载完成之后解压,然后将下载解压后的 winCodeSign 文件夹放到 C:\Users\DELL\AppData\Local\electron-builder\Cache\(DELL是当前电脑的用户名)下面便可以了
    如果出现其他文件下载失败,也可以用上面步骤直接下载解压之后放到 C:\Users\DELL\AppData\Local\electron-builder\Cache\ 下面即可
posted @ 2023-11-15 09:33  乌拉小考  阅读(542)  评论(0编辑  收藏  举报