1.将写好的vue项目打包

        1.1运行vue ui命令

输出目标文件

如果打开index.html是空白的，而且控制台报错获取xxx资源失败的问题，你需要在vue.config.js

上加一个命令，如果没有你需要创建一个。

2.下载electron官方示例

git clone https://github.com/electron/electron-quick-start

下载好是下面这样：

2.1初始化官方示例 npm install 

  

这里要注意你有没有出现这个告警

npm WARN deprecated electron-packager@17.1.2: Please use @electron/packager moving forward. There is no API change, just a package name change

这个是说他的一个包名已经改名字了，在编写下面脚本的时候要注意

2.2运行npm run start 

出现这个窗口说明你初始化成功了。

2.3 将1中打包好的dist文件夹加入到（electron-quick-start）

        将1中打包好的dist文件夹加入到electron-quick-start中，并且删除原来的index.html

 2.4编辑main.js

将原来的 mainWindow.loadFile('index.html') 改为mainWindow.loadFile('./dist/index.html')

mainWindow.loadFile('/index.html') //原来的
mainWindow.loadFile('./dist/index.html')//新的

2.5添加打包脚本

在package.json中添加下面的脚本

这md5 是打包好后的软件名，你可以改成其他的。

 "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ MD5 --platform=win32 --arch=x64  --overwrite"
  },

在2.1初始化的时候如果出现了下面的警告

npm WARN deprecated electron-packager@17.1.2: Please use @electron/packager moving forward. There is no API change, just a package name change

你必需要将脚本换成，才能执行成功

 "scripts": {
    "start": "electron .",
    "packager": "@electron-packager ./ MD5 --platform=win32 --arch=x64  --overwrite"
  },

2.6运行  打包命令 npm run package

这样就是成功了。

结果