记录一次Vue Electron 创建流程

首先自行安装nodejs和npm

设置npm代理

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

安装vue脚手架

npm install -g @vue/cli

创建项目

vue create ldgtool 

选择Vue2

其中ldgtool为项目名称，项目名称不要有中文

cd到项目文件夹

安装 electron-builder

vue add electron-builder

选择 Version ^13.0.0

运行调试项目

npm run electron:serve

打包项目

npm run electron:build

文件会生成在dist_electron目录中

打包程序中文名称

编辑 package.json 追加以下内容

  "productName": "老大哥小助手",
  "author": {
    "name" : "itldg",
    "email" : "wanglong126@139.com",
    "url" : "https://github.com/wanglong126"
  },
  "description": "简单的编程辅助工具",

如果出现 __dirname is not defined 错误

根目录新建 vue.config.js

module.exports = {
　　//解决__dirname错误
    pluginOptions: { electronBuilder: { nodeIntegration: true } },
    //修改标题栏名称
        chainWebpack: (config) => {
        config.plugin('html').tap((args) => {
            args[0].title ='老大哥小助手'
            return args
        })
    },
}

渲染进程使用弹窗提示错误

Cannot read property 'dialog' of undefined

编辑src/background.js

在 创建BrowserWindow时

webPreferences属性增加

enableRemoteModule:true,//开启remote

修改项目图标

默认图标路径为根目录下的build/icons文件夹

如果路径不相同，编辑package.json文件build字段的icon

win下使用的图标是：icon.ico（必须要ico，不可以使用png）

mac下使用的图标是：icon.icns

图标尺寸：256、128、64、32、16，必须要有个256*256的尺寸