Vue-cli3.0+Electron初始化桌面应用程序项目-蒲公英云

Vue-cli3.0+Electron初始化桌面应用程序项目

た入场券 2022-10-13 12:49 288阅读 0赞

初始化一个Vue-cli3.0

vue create vue-electron

创建vue项目过程，选常用模块以及配置

? Please pick a preset: Manually select features
? Check the features needed for your project: 
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

完整的自定义配置项如下：
路由模式选择hash模式
CSS预编译器选择SCSS
Elint格式化风格选择标准配置
在保存代码的时候，检查代码格式
将babel、eslint等的配置文件放在放在各自专用的配置文件中
最后一项是否记录这一次的配置选择？不记录

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter        
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

自定义配置项选择完成后，等待脚手架模板初始化完成

初始化vue项目后，自动安装electron

vue add electron-builder

选择Electron的版本
这里我选择最新的13.0.0及以上版本

? Choose Electron Version (Use arrow keys)
  ^11.0.0
  ^12.0.0
> ^13.0.0

安装完成后，查看项目的目录结构，会自动在src目录下生成background.js并修改了package.json。
查看package.json中的打包指令

"scripts": { 
    "serve": "vue-cli-service serve",//本地运行vue项目
    "build": "vue-cli-service build",//打包vue项目
    "lint": "vue-cli-service lint",//格式化项目
    "electron:build": "vue-cli-service electron:build",//打包Electron项目
    "electron:serve": "vue-cli-service electron:serve",//本地运行Electron项目
    "postinstall": "electron-builder install-app-deps",//在electron-builder被install之后安装App依赖
    "postuninstall": "electron-builder install-app-deps"
  },

根据以上指令，我们运行npm run electron:serve就可以在开发环境运行electron应用
在这里插入图片描述

以上就是初始化一个Vue-cli3.0+Electron 基础项目的步骤，后续我还会介绍Electron应用打包的相关配置、本地日志处理、自动更新处理等；

在安装过程中可能会遇到如下错误：

> vue-electron@0.1.0 postinstall D:\work\test\vue-electron
> electron-builder install-app-deps
Error: Cannot find module 'fs/promises'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (D:\work\test\vue-electron\node_modules\builder-util\src\fs.ts:4:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (D:\work\test\vue-electron\node_modules\builder-util\src\util.ts:24:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-electron@0.1.0 postinstall: `electron-builder install-app-deps`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-electron@0.1.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\82506\AppData\Roaming\npm-cache\_logs\2021-07-07T01_56_37_763Z-debug.log
 ERROR  command failed: npm install --loglevel error

出行这个错误的原因是nodejs版本（我当前的版本10.19.0）太低导致的，查看electron-builder的代码可以发现，里面都是require(“fs/promises”)这样的引用，但是旧版nodejs是require(“fs”).promises的引用方式；
解决方法：
通过升级nodejs的方式解决，本人在win10系统下升级为nodejs14，升级后再初始化重新初始化项目就可以正常运行了