vue项目用electron打包成windows(.exe)桌面应用--操作步骤、填坑方法、基础设置

一、下载运行electron项目

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

cd electron-quick-start
 
npm install
 
npm start

项目跑起来以后， 就会出现electron的桌面项目，找到clone下来项目的入口文件main.js 和package.json.接下来修改路径和配置。

//----main.js----
function createWindow () {
 
  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/../dist/index.html`)  //修改这里

//package.json
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "electron.js",            //--修改的，为后面做准备
  "scripts": {
    "start": "electron ."       
  }

二、 接下来，在已创建好的vue-cli项目中，安装electron依赖，运行如下命令：

#创建vue-cli（有的话无视）
npm install -g vue-cli
cd 文件夹
vue init webpack vue-app
cd vue-app
npm run dev

#安装electron依赖
npm install electron --save-dev
npm install electron-packager --save-dev

现在将clone项目中的main.js拷到vue项目中的build文件夹下，并重命名为electron.js , 并更改config/index.js中生产模式下（build）的assetsPublicPth

  build: {
 
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
 
    assetsPublicPath: './',     //这里改为./

三、在vue项目的package.json文件中增加一条指令，如下：

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js"     //增加的指令
}

接着执行：

npm run build               //生成dist目录(包含静态资源文件)    
 
npm run electron_dev        //启动electron

现在，生成桌面应用跑起来了

打包！
首先，复制build目录下的electron.js到dist目录中，注意很关键的一步是复制过来之后，要调整一下loadURL路径的格式，

像这样：

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
 
  })
 
  // and load the index.html of the app.
  mainWindow.loadURL(`${__dirname}/index.html`)     //--修改的--

接着，复制clone的electron例子的package.json到vue项目的dist目录中。在vue项目的package.json中（注意不是dist下的package.json）为之前下载好的electron-packager，增加一条启动命令。

"build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist/ --platform=win32 --arch=ia32  --icon=./src/assets/olami.ico  --overwrite"         //--新增的命令--

接着，如果你要替换应用图标的话，就在项目中的src文件夹下的assets目录下，放入你要设置的exe文件的图标，为.ico格式。在electron_build里面的路径改

最后，运行

npm run build     //刷新静态资源文件
 
npm run electron_build   //启动

这个时候已经生成了aps-win32-ia32文件夹，找到里面的helloworld.exe文件即可运行。当然，我这里没有给文件重命名，你们可以自行命名。

到这里，exe文件已经最终完成。

用electron打包之后遇到的坑：


1.ico桌面图标
用系统自带的画图工具生成或者是强转，都会报以下错误：

rcedit.exe failed with exit code 1. Reserved header is not 0 or image type is not icon for './src/assets/olami.ico'

解决方法：
下载生成ico工具：
https://icofx.ro/
下载之后，选择需要的图片（其他格式），后ctrl+s生成.ico图片

2.button点击事件(项目中有长按事件)
在vue框架中@touchstart=“Fn” 打包后改为 @mousedown=“Fn”
在vue框架中@touchend=“Fn” 打包之后 @mouseup=“Fn”

3.网络请求
打包之后请求接口会变成file:///C:xxx/xxx/这是请求不通的, 正确的应该是http://xxx或者https://xxx
解决方法：
在vue的main.js中写入下面一段代码

Vue.prototype.$api = "https://xxxx";

再在需要的位置使用

this.$axios.post(this.$api+'/xxx/xxx', params)

windows (.exe)程序 设置
宽高导航栏工具栏调试器

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 400,//打开窗口的宽
    height: 818,//高
    frame:false//是否隐藏导航菜单栏，隐藏了之后不可拖动程序，需要额外编写
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  // mainWindow.loadFile('index.html')
    mainWindow.loadURL(`${__dirname}/index.html`)

  // Open the DevTools.是否开启调试工具
   mainWindow.webContents.openDevTools()

    //是否隐藏隐藏工具栏
    mainWindow.setMenu(null)
}