electron-vue 开发问题合集

(一)Found ‘electron’ but not as a devDependency, pruning anyway

原因:对electron没有严格要求的话可以忽略,不影响打包,但会影响第三方库的使用,应使用推荐库进行打包。

修改 .electron-vue/webpack.renderer.config.js 文件

// let whiteListedModules = ['vue']
let whiteListedModules = ['vue', 'electron']

(二)Multispinner is not defined

原因:在 electron -vue 的模板中,没有引入 multispinner 相关的依赖,对 multispinner 依赖重新安装,并在 build.js 文件中加入引用。

命令行安装 multispinner

npm install multispinner -D

在 .electron-vue/build.js  文件中引入 multispinner

const Multispinner = require('multispinner')

(三)Build:Identifier 'tasks'has already been declared
原因:在 .electron-vue/build.js 中重复申明了tasks,导致在打包时报错,所以需要对其中至少一个tasks 进行重命名。

修改 .electron-vue/build.js 文件

// const tasks = ['main', 'renderer']
// const m = new Multispinner(tasks, { ...
const tasks1 = ['main', 'renderer']
const m = new Multispinner(tasks1, { ...


// const tasks = new Listr( ...
// await tasks
const tasks2 = new Listr( ...
await tasks2

(四)electron-packager --打包命令的参数设置

"scripts": {
  "package": "electron-packager ./ app --all --out ./out --electron-version 2.0.18 --overwrite --icon=./src/renderer/assets/images/icon"
}

/**
* 
* electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>
* 
* 参数说明:
*   sourcedir:项目所在路径
*   appname:应用名称
*   platform:确定了你要构建哪个平台的应用(Windows、Mac 还是 Linux)
*   architecture:决定了使用 x86 还是 x64 还是两个架构都用
*   electron version:electron 的版本
*   optional options:可选选项
* 
**/

打包成功如下:

根据配置在项目根目录下生成 CloudPrint 文件夹:

(五)自定义 ico 图标

 注意:必须使用软件处理后生成的 .ico 文件,不能直接修改后缀名得到 .ico 文件(因为通过修改其他格式图片的后缀生成的 .icon 文件在打包时会报错!!!)。 

(六)打包成功运行桌面应用白屏

修改 .electron-vue/webpack.renderer.config.js 文件

// nodeModules: process.env.NODE_ENV !== 'production'  ? path.resolve(__dirname, '../node_modules') : false
  nodeModules: path.resolve(__dirname, '../node_modules')

(七)打包时 resource busy or locked, rmdir 'D:wwwg************-win32-ia32'

原因:当前打包的项目有正在运行的已打包程序,确定关闭后重新打包 。打包时关闭正在运行的已打包程序。

(八)mac环境的包需要在Mac上进行打包!!!

(九)macOS“自动更新”必须使用苹果开发者证书进行签名!!!

(十)npm run build:web 报错:can‘t resolve 'fs'

修改 webpack.web.config.js 文件

// target: 'electron-main'
// target: 'web'
  target: 'electron-renderer'

(十一)实现点击任务栏图标显示/隐藏客户端

  

(十二)Linux环境命令行报错 `node ./postinstall.js`

// 解决方法:将electron下载地址指向taobao镜像

npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"

cnpm install

(十三)生产环境下启用应用程序的开发者工具

// 打开
mainWindow.webContents.openDevTools()

// 分离状态打开
mainWindow.webContents.openDevTools({ mode: 'detach' })

// 在窗口左侧打开
mainWindow.webContents.openDevTools({ mode: 'left' })

// 在窗口右侧打开
mainWindow.webContents.openDevTools({ mode: 'right' })

// 在窗口底部打开
mainWindow.webContents.openDevTools({ mode: 'bottom' })

(十四)主进程对静态文件的访问

 如下:主进程设置图标路径,需根据开发环境和生成环境的不同而不同。

 要求:dev环境下添加icon.png至/src/renderer/assets/images ; pro环境下添加icon.png至/static 。

// main/index.js

// 窗口、任务栏、托盘等图标的路径设置
icon: process.env.NODE_ENV === 'development' ? path.join(__dirname, '../renderer/assets/images/icon.png') : path.join(__static, './icon.png')

日常开发中不会将相同图片copy两次放不同位置,可通过build配置拷贝静态文件到所需位置。

修改 webpack.renderer.config.js 、webpack.web.config.js 文件

// .electron-vue/webpack.renderer.config.js  和 .electron-vue/webpack.web.config.js

// if (process.env.NODE_ENV === 'production') {
//   ...    
// 
//   rendererConfig.plugins.push(
//     ...
// 
//     new CopyWebpackPlugin([
//       {
//         from: path.join(__dirname, '../static'),
//         to: path.join(__dirname, '../dist/electron/static'),
//         ignore: ['.*']
//       }
//     ])
// 
//     ...
//   )
// }

if (process.env.NODE_ENV === 'production') {
  ...    

  rendererConfig.plugins.push(
    ...

    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/electron/static'),
        ignore: ['.*']
      },
      {
        from: path.join(__dirname, '../src/renderer/assets/images/icon.png'),
        to: path.join(__dirname, '../dist/electron/static/icon.png')
      }
    ])

    ...
  )
}
原文地址:https://www.cnblogs.com/zhaoxiaoying/p/15307892.html