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:\www\g**\\-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')

      }

    ])

    ...

  )

}

巴特西

electron-vue 开发问题合集

（一）Found ‘electron’ but not as a devDependency, pruning anyway

（四）electron-packager --打包命令的参数设置

（五）自定义 ico 图标

（六）打包成功运行桌面应用白屏

（七）打包时 resource busy or locked, rmdir 'D:\www\g**\\-win32-ia32'

（八）mac环境的包需要在Mac上进行打包！！！

（九）macOS“自动更新”必须要使用苹果开发者证书进行签名！！！

（十）npm run build:web 报错：can‘t resolve 'fs'

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

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

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

（十四）主进程对静态文件的访问

最新文章

热门文章

巴特西

electron-vue 开发问题合集

（一）Found ‘electron’ but not as a devDependency, pruning anyway

（四）electron-packager --打包命令的参数设置

（五）自定义 ico 图标

（六）打包成功运行桌面应用白屏

（七）打包时 resource busy or locked, rmdir 'D:\www\g******\***\***-win32-ia32'

（八）mac环境的包需要在Mac上进行打包！！！

（九）macOS“自动更新”必须要使用苹果开发者证书进行签名！！！

（十）npm run build:web 报错：can‘t resolve 'fs'

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

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

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

（十四）主进程对静态文件的访问

最新文章

热门文章

（七）打包时 resource busy or locked, rmdir 'D:\www\g**\\-win32-ia32'