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

た入场券 2022-10-13 12:49 251阅读 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应用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70_pic_center]

以上就是初始化一个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，升级后再初始化重新初始化项目就可以正常运行了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/11c873b628b04212845369ef4e68c2c4.png