window10 Electron+Vue 最简单的原生项目创建，从环境搭建到打包

一、准备工作

        1、开发软件：vscode

        2、网络（越快越好）

二、安装node.js

        因为electron是基于Node.js开发的桌面应用程序，支持Node.js所有的语法，所以Node.js安装是必备的。且node.js自带npm也是后续必须用到的工具。

        node.js下载地址：https://nodejs.org/en。打开后界面如下：

        推荐下载左边的LTS版本，LTS版本是发布后经过维护和安全更新的稳定版本，比较适合学习和生产使用，Current版本是当前最新的开发版本。

        下面是下载好的安装包。

        双击安装包安装，一路默认安装就好，安装路径选择自己想安装的位置（程序员嘛，最好开发环境都安装在纯英文路径下）。

        安装好后，按win+R打开命令提示符，输入 node -v 回车，显示node的版本即安装成功。

        顺便说一下，node.js过程中一路默认的话，默认是配置到系统环境变量的，不用再单独去配置环境变量。

三、安装vue-cli

        为什么是安装vue-cli不是vue呢，因为vue是“vue.js”的简称，是一个成熟的用于构建用户界面的JavaScript渐进式框架，而“vue-cli”是vue基础上进行开发的工具系统，是vue框架的一个命令工具，也是个脚手架。所以vue-cli才是我们要安装的工具。

        1、使用npm安装

        打开vscode软件，新建一个终端，输入下面的指令进行安装。

cnpm install -g @vue/cli

        vue-cli也是基于Node.js开发出来的工具，安装时要加-g成全局可用的工具，后续在创建项目时就不用在项目本地再次安装了。

        不过不推荐使用npm方式安装，因为npm是node官方的包管理器，经常因为网络原因出现无法安装或安装失败的情况，使用推荐使用下面第二种方式cnpm安装。

        下面是使用npm安装过程的样子。我自己就是npm下载太慢使用了cnpm下载，所以只展示npm的下载过程。

        2、使用cnpm安装

        cnpm是个中国版的npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。

        在使用cnpm安装vue-cli前，使用下面的指令先安装cnpm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

        安装好后，输入 cnpm -v 回车查看版本，显示如下代表安装成功。

        接着就能使用cnpm安装vue-cli了，使用cnpm代替npm安装的话，指令和npm基本一样，只是把指令前面的npm的改成cnpm，如下。

cnpm install -g @vue/cli

        下载完成：

        使用 vue -V 查看版本，注意这里是大写的V，或者使用vue --version 。

四、创建vue项目

        创建vue项目有很多种，推荐使用vue自带的图形化界面，快捷简单，安装各种插件也很方便。        

        1、创建项目        

        还是在vscode，先打开项目要放置的文件夹，打开终端，输入 vue -v 打开图形化界面。

        图形化界面启动中：

        打开界面如下，图里面的demo1是我之前创建的。

        点击“create”，红框这里显示的路径是你打开vue ui的路径，如果创建过项目的话，默认打开的是之前项目的路径，可以重新编辑想要安装的路径。确定好路径后，点击下方的“+ Create a new project here”开始创建项目。

        输入项目名称，这里也能修改项目路径，其他保持默认即可，点击“Next”。

        使用默认配置的vue3，点击“Create Project”，开始创建。

        正在创建项目中，终端里面也会显示进度。

        创建完成后，自动生成在创建路径下，项目结构如下：

        2、安装vue-router

        vue-router 是一个官方的 Vue.js 插件，它允许开发人员在应用程序中实现路由。路由可以看作是前端应用程序中的页面，其可以是任何东西，例如登录、主页、个人设置等等。实现路由可以让应用程序具有页面路由功能，从而能够实现多页面之间切换，以及 URL 中的参数控制页面的显示。       

        还是在图形化界面，  点击“Plugins”-“Add vue-router”。

      点击“Continue”，即开始自动安装。

        安装完成后，刷新一下界面，即可看到安装好的vue-router。

        至此，vue原生项目创建完成。

五、安装Electron-builder

        还是在图形化界面的“Plugins”，点击右上角的“Add plugin”。

        搜索“electron”，选择第一个“vue-cli-plugin-electron-builder”，然后点击“install”开始安装。

        安装中：

        安装完成后，选择electron版本，选择默认最新的即可，点击“Finish installation”。

        开始为项目添加electron-builder。

        点击“Continue”完成。

        至此，electron-builder添加完成，此时原本的vue项目里面已经添加了electron框架。在vue项目的src文件下可看到多了一个“background.js”文件，根目录下的配置文件“package.json”中多了electron相关的配置，入口文件也变成了“background.js”，后面运行项目时使用的是electron:serve，打包用的是electron:build。

六、运行项目

        在终端中进入项目路径：

        输入下面指令运行，这里还是推荐使用cnpm代替npm。

cnpm run electron:serve

        运行成功后会出现程序界面如下，如果没有出现检查工具可以使用快捷键“ctrl+shift+i”调出，这里程序显示的界面是原生项目默认自带的界面，界面具体相关代码在项目的src路径下的App.vue文件。

         如果是第一次运行的话，可能会出现提示错误的情况并需要等待很久才能看到程序运行起来，基本都是因为在运行时会自动检测安装electron-devtools-installer，但因为网络原因很容易超时安装失败，终端显示如下：

        有以下几种解决方法推荐：

        1、重新运行安装几次或换个网络环境。

        2、在background.js文件里面注释掉这一行代码或者直接电脑断网，跳过“安装electron-devtools-installer”这一步。

        3、更换镜像源，可以更换为淘宝的。

七、打包项目build

        打包前需要先把刚刚运行的程序关掉。然后输入下面指令运行，这里还是推荐使用cnpm代替npm。

cnpm run electron:build

        打包中：

        第一次打包基本都会遇到以下失败的提示，主要是nodeJs V17版本发布了OpenSSL3.0对算法和秘钥大小增加了更为严格的限制，导致了nodeJs V17之前版本不受影刺而nodeJs V17和之后的版本会出现这个错误。也就是nodeJs版本过高的原因导致了运行失败。

        有以下几种解决办法：

        1、更改系统环境变量。

        我的电脑上右键 → 属性 → 高级系统设置 → 添加系统变量：NODE_OPTIONS = --openssl-legacy-provider

        2、更改项目环境变量。

        在项目中的package.json文件里面，找到

"electron:build": "vue-cli-service electron:build",

        将其改为

"electron:build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:build",

        3、如果node.js版本是v17及以上版本，更改node.js版本，降低到v17以前。

        选择解决方法后（个人是选择第二种），重新打包，打包成功：

        如果打包过程中出现类似的错误提示，一般是building和downloading，这种是因为网速原因下载失败，建议换个网络环境或者多安装几次试试，或者换个镜像源例如淘宝。

        更换镜像源的话，在项目根目录下创建一个.npmrc文件，在里面写入：

registry =https://registry.npm.taobao.org

        然后使用npm进行打包：

npm run electron:build

八、运行打包后的程序

        打包成功后，在项目的dist_electron文件下可以找到一个.exe文件，文件名和你的项目名称、版本有关系，大致如下，这个是我们项目程序的安装包。这个dist_electron文件是在项目运行或者项目打包时生成的，即cnpm/npm run electron:serve/build。

         然后直接双击进行安装。

        安装完成后会自动打开运行，效果和使用cnpm run electron:serve一样，不过不会默认打开检查工具。

         因为是原生项目，还没有做任何更改，安装程序会默认安装“C:\Users\86135\AppData\Local\Programs\electron_vue_demo2”路径下，且会自动生成快捷方式在桌面。

        由于electron-vue的特性，在window系统开发环境下只能打包生成在window系统的应用。

后语

        至此，实现了原生的electron-vue项目从环境搭建到打包，其实有很多种实现方式，但测试了各种方式后被折磨后，觉得这种方式是最简单最直接的，当然，其中创建项目的过程还有各种配置可以修改，这种可以再熟悉开发环境后继续研究。