electron把写好的vue项目打包成桌面APP

基本流程

1、安装依赖

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

2、修改config/index.js

build:{
  assetsPublicPath: './'
}

3、接口地址修改（如未做过本地反向代理可跳过这一步）
比如利用proxyTable做反向代理时所用的配置url，替换为原接口
举例如下：
在config/index.js中

dev: {
  proxyTable: {
     '/api':  { 
          target: 'http://www.acgjc.com',
          secure: false,
          changeOrigin: true,
          pathRewrite: { "^/api": "" }
  }
}

在接口管理文件中

export const Preflight = params => {
  return axios({
    url:  '/api/Preflight _v1',
    method: 'get',
    params
  })
}

改为

export const Preflight = params => {
  return axios({
    url:  'http://www.acgjc.com/Preflight _v1',
    method: 'get',
    params
  })
}

4、packjson.js
添加文件入口

"main": "main.js"

添加打包文件入口

"scripts": {
   "electron": "electron .",
   "package": "electron-packager ./yourAppName--platform=win32 --arch=x64 --out ./"
}

5、从官网clone例子

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

cd electron-quick-start

npm install

npm start

将文件下的main.js复制到vue项目根目录下，修改main.js
增加

const path = require('path')
const url = require('url')

将

mainWindow.loadFile('index.html')

改为

const startUrl = url.format({
    pathname: path.join(__dirname, './dist/index.html'),
    protocol: 'file:',
    slashes: true
  });

注：’./dist/index.html’是运行 npm run build生成
6,万事具备 运行 npm run electron 查看效果
运行npm run packager 在根目录下查看打包文件
类似

红框中文件即为打包后生成的文件，文件名在第四步中生成
打开生成的文件夹，在其中找到exe文件，双击即可查看效果
7、调试相关
运行npm run electron 前可选择在main.js(根目录下的main.js,非src下的)中，将mainWindow.webContents.openDevTools() 取消注释 ，即可打开在项目中显示控制台
如果运行项目后出现白屏，可以从以下几个方面解决问题
(1)、如果控制台提示找不到 .ico文件，可在将产品logo图转成ico文件，点击这里转化，然后将图片放到根目录下，然后在根目录的index.html下添加

<link rel="Shortcut Icon" type="image/x-icon" href="favicon.ico">

或者

<link rel="shortcut icon" href="/favicon.ico"/> 

或者

<link rel="bookmark" href="/favicon.ico"/>

(2)、如果提示找不到 *.map文件 ，可在config/index.js修改build部分

build: {
   productionSourceMap: true
}

将此项true改为false
该项的意义是生产环境的 source map，目前我使用的时候主要用于查询项目中特殊代码，如果有其他不足之处，欢迎斧正
(3)如果控制台没有报错，最好检测生成的dist文件是否可用，检测方法可试试在vue项目中安装http-server轻量服务器，或者在apache或者nginx服务器上跑代码
http-server安装运行命令如下

npm install http-server --save-dev
cd dist
http-server