用electron 将pc端vue项目打包为桌面端应用（下）

1.把electron的官方例子clone下来

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

2.输入以下命令，运行demo

cd electron-quick-start
npm install
npm start

这时候运行出来的界面如下

3.将自己项目打包好的dist文件中的所有文件，复制到electron-quick-start的根目录（图一）文件中

此时的electron-quick-start文件夹是这样的，红框里面是复制过来的打包好的dist文件夹内的文件

4.重新运行一下

npm start

运行结果如下

5.安装electron-packager打包依赖

npm install electron-packager --save-dev

6.在package.json中增加一条命令

关于electron-packager的配置，参照上一篇用electron 将pc端vue项目打包为桌面端应用（上）

"scripts": {
    "start": "electron .",
    "packager:win32": "electron-packager . electron-project --platform=win32 --arch=x64 --out ./OutApp  --overwrite --icon=./favicon.ico",
    "packager:mac": "electron-packager . electron-project --platform=darwin --arch=x64 --out ./OutApp  --overwrite --icon=./favicon.ico",
    "packager:linux": "electron-packager . electron-project --platform=linux --out ./OutApp  --overwrite --icon=./favicon.ico"
  },

7.执行打包命令

npm run packager:win32

这时候打包完的文件是这样的，OutApp为输出目录

打开electron-project-win32-x64文件夹，双击启动exe文件

就可以看到打包后的文件了

可以将electron-project.exe文件发送到桌面快捷方式

双击快捷方式，也可以打开项目。

8.至此，vue打包桌面端就这样完成了。

另一种方法，请参照用electron 将pc端vue项目打包为桌面端应用（上）

 

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------