将现有的vue项目用electron打包成桌面应用

一、首先，我们先clone在electron官网的demo

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

接下来对clone的项目中的main.js和package.json做相关如下修改

main.js

 win.loadFile('../dist/index.html'); //修改路径

package.json

{
    
    
  "name": "my-Electron",
  "version": "1.0.0",
  "main": "electron.js", //改为electron.js 为后面做准备
  "license": "MIT",
  "scripts": {
    
    
    "start": "electron ."
  },

二、对现有的vue项目做相关配置
1.安装electron依赖,执行如下命令

npm install electron --save-dev

npm install electron-packager --save-dev

2.将上面修改好的main.js 复制到在项目中的build文件夹中并重命名为electron.js
3.在目录config/index.js中将assetsPublicPath更改为相对路径

 assetsPublicPath: './',

4.在项目中package.json中添加一条指令

"scripts": {
    
    
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js",//新增的命令

接着运行

//生成dist文件夹
npm run build
//运行electron
npm run electron_dev

现在，生成桌面应用基本成功实现了，但还剩下最后一步那就是打包！

首先，将build文件夹下的electron.js和之前修改好的package.json文件复制到dist里，
然后再在vue项目中的package.json做如下添加指令（这个package.json是原vue项目的）

  "scripts": {
    
    
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64  --icon=./src/assets/ele.ico  --overwrite"  //新增的指令
  },

其中icon=./src/assets/ele.ico是生成exe文件图标的，这里的ico必须是原生的ico文件格式。这里附上ico在线制作连接

最后执行以下命令

npm run build 
npm run electron_build

最终就会生成相应的文件夹如my-Electron-win32-x64，在生成的文件中找到my-Electron.exe点击打开就可以看到生成的桌面应用了。如下图（这是我用我们公司现有的项目生成的）
在这里插入图片描述
注意，打开后有可能会出现页面空白

大致有两种原因：
第一种：一般情况下先确定是不是路径的问题，如果是路径问题的话修改路径。

第二种：：如果router/index中配置的默认模式是history,那么打包后就是空白，将history将替换成hash或者把默认模式配置删除。
如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。所以只要删除mode或者把mode改成hash就可以了

将现有的vue项目用electron打包成桌面应用

猜你喜欢