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

vue 中引入electron

首先在vue项目中安装electron的依赖

npm install electron --save-dev
npm install electron-packager --save-dev

 

把electron的官方例子clone下来

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

 

在vue项目中，建一个build文件夹，把electron-quick-start项目中的main.js搬到build文件夹中，并改个名字electron.js。

​

此时的electron.js 里面的引用地址也要变，即：

mainWindow.loadFile('index.html')

改为：

mainWindow.loadFile('../dist/index.html')

 

在package.json文件中增加一条指令，用来启动electron，即：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron": "npm run build && electron build/electron.js"
  },

 

electron 就是用来启动electron的，在此之前我们一定要确保项目当中已经有构建好的静态资源文件，因此 在运行 electron build/electron.js 之前，首先运行 npm run build。此时运行出来的应用是这样的

​

 

到这一步，一切都非常顺利，然而就在一切都理所应当的时候，打包exe文件出现了问题。

 

打包exe文件

首先，为之前下载好的electron-packager，增加一条启动命令。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron": "npm run build && electron build/electron.js",
    "packager": "electron-packager ./dist --platform=win32 --arch=x64 --out ./OutApp --electron-version 6.0.5 --overwrite --icon=./src/assets/favicon.ico"
  },

 

关于electron-packager的配置，简单介绍一下。 

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

• location of project：项目所在路径
• name of project：打包的项目名字
• platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）（darwin: 苹果系统，linux: linux系统，mas:Mac App Store, win32: windows系统）
• architecture：决定了使用 x86 还是 x64 还是两个架构都用 （x64,ia32）
• electron version：electron 的版本
• optional options：可选选项（ --overwrite覆盖原文件）
• | --out 输出目录
• | --extra-resource 需要打包的外部资源

• 例：

   "packager:mac": "electron-packager . DEMO-electron --platform=darwin --arch=x64 --overwrite --icon=./assets/app-icon/mac/app.icns --out=out --asar --app-version=0.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config*|node_modules)\" --extra-resource=\"./assets\"",
      
   "packager:win": "electron-packager . DEMO-electron --platform=win32 --arch=x64 --overwrite --icon=./assets/app-icon/win/app.ico --out=out --asar --app-version=0.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\" --extra-resource=\"./assets\"",
      
   "packager:linux": "electron-packager . DEMO-electron --platform=linux --arch=x64 --overwrite --out=out --asar --app-version=0.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\" --extra-resource=\"./assets\"",
  

  备注：
  打包后如果有新安装的node模块报错，把忽略列表中的node_modules删掉即可
  如果有外部自定义目录需要打包，则加上–extra-resource=“自定义目录路径” 就会自定义的目录打包进去

npm run packager

 

还是一如既往的顺利，项目中成功出现打包好的文件夹，如下图

​

 

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

​

这时候看到会报错，报错说找不到一个合法的app

​

 

想当然的以为dist/下是去找index.html，但是实际上是去找package，然后再去找入口的js，最后才去找index.html。于是先手动在dist文件夹下增加electron.js和package.json，具体方法是复制项目中的 package.json和build文件夹下的electron.js到dist文件夹中

​

此时需要更改electron.js里面的引用地址也要变为：

mainWindow.loadFile('index.html')

再次运行npm run packager得到打包好的文件夹，找到其中的*.exe，双击运行，终于又出现了熟悉的画面。

​

可以将文件发送到桌面快捷方式，

 

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

 

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

 

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