vue-electron创建项目并打包

前言

  最近在忙别的事情，一直没来得及更新博客，今天就写一个关于桌面应用的吧。

  这个东西是我一直想做的，学了好长时间的web了，面对各种网站，心里总有一种说不上来的冲动。

  对桌面应用一直感兴趣，就感觉这东西好神奇，怎么就可以变成一个安装包安装了？怎么就可直接在桌面打开了？怎么就可以有和网站一样的功能了？这一切要从一个电子说起！

---

开搞

1. 先搞一个vue项目，就普普通通的vue create 项目名就行。不会建的参考我的另一篇博客vue创建项目，如果还没有装环境的，先把环境装了吧。

2. 切换到项目目录下，用vue add electron-builder去装一个electron打包的工具，刚开始可能会报错，这是因为这个网站在外国，必须科学上网（都懂得）。安装完之后是这样的
   

   success

3. 运行npm run electron:serve
   

   success

4. 打包npm run electron:build，有时候会报错，就像这样（第一次build的时候要有耐心，因为要连外网，连接超时很正常，多试几次）
   

   error
   
   这时就再来一次
   
   success
   
   
   打包成功

还有的会出现node版本出现问题或者是某一个模块出现缺失，这种情况就要重装node了，用最新版的就行!(两个大哥亲测 node 12总出bug,就升了16，就可以了)

5. 安装，点击EXE就能安装了，默认路径是C:\Users\Administrator\AppData\Local\Programs\项目名
   

6. 这时候可以改安装路径，在项目下建一个和package.json同级的vue.config.js,里面写这些东西

module.exports = {
  pluginOptions: {
    electronBuilder: {
      // 渲染进程也可以获取原生node包
      nodeIntegration: true,
      // 打包配置
      builderOptions: {
        nsis: {
          // 一键安装，如果设为true，nsis设置就无意义请直接删除 nsis 配置
          oneClick: false,
          // true全用户安装，false安装到当前用户
          perMachine: true,
          // 允许修改安装目录
          allowToChangeInstallationDirectory: true,
          // 创建桌面图标
          createDesktopShortcut: true,
          // 创建开始菜单图标
          createStartMenuShortcut: true,
          // 快捷方式的名称,默认为应用程序名称
          // shortcutName: 'xx',
        }
      }
    }
  }
};

7. 再次打包

   
   
   success
   
   
   success