Vue项目打包成.exe文件放在桌面的快捷打开方式，用electron实现

首先到electron官网或者GitHub上下载一个模板electron-quick-start

复制下面地址就可clone了
Git地址:git clone https://github.com/electron/electron-quick-start

进入到electron-quick-start文件中

cd electron-quick-start (或者直接打开文件)

安装依赖

npm start 跑起来就能看到官方demo（不用跑）

看看electron-quick-start中的入口文件main.js, 以下是createWindow函数中的部分：

function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({
	    width: 800, // 窗口的宽度
	    height: 600, // 窗口高度
	    webPreferences: {
	    	nodeIntegration: true
	    }
    })
    // and load the index.html of the app.
    mainWindow.loadFile('index.html') // 设置入口页面
    "electron_build": "electron-packager ./dist/ 快钱查询 --platform=win32 --arch=x64 --icon=./src/assets/kq.ico --overwrite" // 就是这一句命令
},

对于"electron_build"这条命令的介绍如下:

electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]

1.sourcedir 资源路径，在本例中既是./dist/
2.appname 打包出的exe名称
3.platform 平台名称（windows是win32）
4.arch 版本，本例为x64

此时来打包vue项目(也可以一开始就打包)

cnpm run build

在打包后的dist文件夹中增加electron.js和package.json

这个electron.js与刚刚build文件夹下的electron.js一样，不过入口页面路径应该改为相对于当前文件的路径。即：

mainWindow.loadURL(url.format({ 
    pathname: path.join(__dirname, 'index.html'), //注意此处 
    protocol: 'file:', slashes: true 
}))

这个package.json与最开始electron-quick-start项目中的package.json文件一致，不过里面的main应该指向从build文件夹中的electron.js。即：

{
  "name": "RFID",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "electron.js",// 注意此处(如果之前没改名这里就不用改名)
  "scripts": {
    "start": "electron ."
  },
}

最后就在vue项目中开始打包,运行之前设置的命令

npm run electron_build

如果打包后在本地打不开exe文件或者报错,那一定是
因为静态资源路径的问题。现在打开项目，我们修改一下路径。
第一步，将vue config下面index.js里面截图部分路径‘/’改为‘./’，

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',

assetsPublicPath: './', // 改这里

重新打包好之后，我们在打开本地资源，这时我又发现一个新的问题，页面打开仍然是空白，但是控制台已经不报错了，哇，很难受，在半个小时后最终知道了问题所在，是因为路由的问题 坑啊！！！
接下来我们打开vue 的router文件夹下的index.js文件,我的是这个,
如下,脚手架搭建的项目，默认这块的值是History ，我们需要将History 改为hash。因为默认的他无法渲染页面。

export default new Router({
    // mode: 'history', // 后端支持可开
    mode: 'hash', // 在本地打开
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap
})

修改好后重新进行vue打包: cnpm run build
vue打包好后再运行cnpm run electron_build

此时在你的vue项目中多出了一个类似 (快钱查询-win32-x64)的文件夹,
此时你即刻打开它将里面的exe文件发送到桌面就可以了.