背景

将现有Vue项目打包成桌面应用（包括mac、windows、linux），并且保持web项目。

实现

01-环境配置

需要node环境（使用npm下载时遇到下载失败的情况可以下载yarn，使用yarn下载依赖）：node -v查看安装情况
(注：需要安装python环境)

02-安装electron

1.electron：sudo npm install --save-dev electron(当前项目安装即可，不用全局安装)
2.mac电脑可能出现的权限问题解决方法如下：
  sudo npm install electron --unsafe-perm=true --allow-root

03-根目录下新建主进程文件main.js

特别的注意该文件中loadFile属性值为项目里Vue项目build出来的的index.html。
  const { app, BrowserWindow } = require('electron')
  let mainWindow
  let windowConfig = {
    width: 1920,
    height: 1080,
    webPreferences: {
      webSecurity: false  // 解决打包后谷歌浏览器不能访问本地文件的问题
    },
  }
  function createWindow() {
    mainWindow = new BrowserWindow(windowConfig)
    mainWindow.show()
    mainWindow.loadFile('./dist/index.html')
    mainWindow.webContents.openDevTools()    // 是否打开开发者工具
    mainWindow.on('closed', function () {
      mainWindow = null
    })
    mainWindow.on('resize', function () {
      mainWindow.reload()
    })
  }
    app.on('ready', () => {
      createWindow()
      const { Menu } = require('electron')
      Menu.setApplicationMenu(null) // 设置window下隐藏菜单栏
    })
    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') app.quit()
    })
    app.on('activate', function () {
      if (mainWindow == null) createWindow()
    })
    //更多设置可自定义添加

04-打包(electron-builder)

由于electron-packager命令行过长，不如electron-builder支持可配置，包括平台配置、nsis配置，故项目使用electron-builder打包，特此说明。
1.添加依赖：
  npm install electron-builder --save-dev 或者 yarn add electron-builder --save-dev
  (添加yarn环境：npm install yarn)
2.修改package.json文件
  1)添加配置："main":"main.js"
  2)build参数配置：
    (build中可以适当增加nsis配置，可以优化用户体验，更多详细配置可参见官方文档 'nsis配置')
    "build": {
      "appId": "com.demo.app", 
      "productName":"cmn",
      "directories": { 
        "output": "build"  //存放打包的应用程序包
      },
      "mac": {
        "icon": ".../../..png"  //应用程序图标
        "target": ["dmg","zip"]
       },
      "win": {
        "target": [
          {
            "target":"nsis",
            "arch":[ "ia32" ]
          }
         ] 
       }
      "nsis":{
        "oneClick":false,  //是否一键安装
        "createDesktopShortcut":"always",  //是否添加桌面快捷方式
        "allowToChangeInstallationDirectory":true //允许修改安装目录
      }
    },
  3)scripts中添加命令：
    "start":"electron .",  //启动electron窗口项目
    "dist":"npm run build && electron-builder"  //使用electron-builder进行打包，先生成静态资源包再进行electron打包
    (其中，运行npm run dist命令时，npm run build 对应vue项目的production模式其对应接口地址为''，故如果要使用development模式对应地址，可修改npm run build命令对应development模式下地址)
3.vue.config.js里面添加： publicPath: './'
4.执行 npm run dist 打包生成build文件夹存放打包好的包。
  (如若只执行 npm run build 打包生成的还是原来的Vue项目)
5.注意事项：
  1)electron-builder没有指定打包平台和系统是因为打包的时候会参考当前操作系统进行打包。自定义指定配置如下：
    electron-builder --platform --arch
    其中platform是配置打包成什么平台的安装文件，win系统是 win32，mac系统是 darwin，linux系统是 linux；arch是指定系统什么架构，ia32 是32位操作系统，x64 是64位操作系统。
  2)mac上不签名也可以打包成功，安装的时候还要更改电脑权限（有可能是我上面提及到安装electron时候的权限操作，在此项目打包时没有遇到），但是涉及到自动更新、发不到app store等动能则不能用，故是否添加代码签名可自定义，参考地址为'code-signing'。
6.常见问题：
  1)添加electron依赖出错
    设置淘宝镜像源：npm config set registry='http://registry.npm.taobao.org/'
  2)electron-builder下载出错，可能是因为某些包下载慢的原因，可以根据提示手动下载包。
  3)打包之后的程序运行可能会有警告：DevTools failed to load SourceMap: Could not load content for...,解决方法是在vue.config.js中的webpack里面配置即configureWebpack下添加devtool: 'inline-source-map'。
7.关于配置不同环境的url问题：
  项目根目录下新建.env.development文件和.env.production文件其内容分别为VUE_APP_BASE_URL = 'http://192.168.1.101:80/' 和 VUE_APP_BASE_URL = ''，在需要使用api的地方通过process.env.VUE_APP_BASE_URL获取，运行命令为npm run serve和npm run build分别默认对应开发环境和生产环境。（其中.env文件是Vue默认的配置文件，会根据当前环境自动执行不同文件，其属性名必须以VUE_APP_XXX开头。也可对运行命令自定义更改模式npm run serve --mode production）。

别的实现方法

vue+electron；
vue-cli-plugin-electron-builder