Electron+Vue的开发经验

搭建Electron+Vue项目

安装Vue脚手架与创建vue项目

1. 安装vue脚手架npm install -g @vue/cli

2. 进入到项目所在文件夹，然后在下图的红框中输入cmd并回车打开cmd窗口

3. 创建Vue项目vue create myproject，PS：myproject为项目名称，可自定义

4. 进入项目中cd myproject后安装electron-builder vue add electron-builder

5. 安装所有依赖npm install，最后执行项目npm run electron:serve

运行过程中的问题

Q1：启动项目用时长且报如下错误

Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT`

解决方法
1.安装npm install vue-devtools --save-dev
2.src/background.js中部分代码按照如下改动

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    require('vue-devtools').install()
    // try {
    //   await installExtension(VUEJS_DEVTOOLS)
    // } catch (e) {
    //   console.error('Vue Devtools failed to install:', e.toString())
    // }
  }
  createWindow()
})

Q2：在使用nodejs组件时，项目启动就报类似如下错误

Module not found: Error: Can't resolve 'fs' in 'D:\project\myproject\src'

ERROR in ./src/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js&) 2:0-20
Module not found: Error: Can't resolve 'fs' in 'D:\project\myproject\src'
 @ ./src/App.vue?vue&type=script&lang=js& 1:0-191 1:207-210 1:212-400 1:212-400
 @ ./src/App.vue 2:0-55 3:0-50 3:0-50 10:2-8
 @ ./src/main.js 2:0-28 5:17-20

解决方法
1.在vue.config.js中部分代码按照如下改动

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
})

Q3：在打包时报electron、winCodeSign、nsis的安装错误，如下所示

• writing effective config  file=dist_electron\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=13.6.9 appOutDir=dist_electron\win-unpacked
  ⨯ Get "https://github.com/electron/electron/releases/download/v13.6.9/electron-v13.6.9-win32-x64.zip": read tcp 192.168.2.5:60665->20.27.177.113:443: wsarecv: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.
github.com/develar/app-builder/pkg/download.(*Downloader).follow.func1
github.com/develar/app-builder/pkg/download.(*Downloader).follow
        /Volumes/data/Documents/app-builder/pkg/download/downloader.go:234
github.com/develar/app-builder/pkg/download.(*Downloader).DownloadNoRetry
        /Volumes/data/Documents/app-builder/pkg/download/downloader.go:128
github.com/develar/app-builder/pkg/download.(*Downloader).Download
        /Volumes/data/Documents/app-builder/pkg/download/downloader.go:112
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).doDownload
        /Volumes/data/Documents/app-builder/pkg/electron/electronDownloader.go:192
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).Download
        /Volumes/data/Documents/app-builder/pkg/electron/electronDownloader.go:177
github.com/develar/app-builder/pkg/electron.downloadElectron.func1.1
        /Volumes/data/Documents/app-builder/pkg/electron/electronDownloader.go:73
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2
        /Volumes/data/Documents/app-builder/pkg/util/async.go:68
runtime.goexit
        /usr/local/Cellar/go/1.16.5/libexec/src/runtime/asm_amd64.s:1371  

解决方法：
1.找到C://用户/当前使用的用户名文件夹下的.npmrc文件，将其中内容按照如下所示改动

registry=http://registry.npm.taobao.org/
disturl=https://npm.taobao.org/mirrors/node
electron_mirror=https://npm.taobao.org/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

Q4：依赖文件路径存在中文，如下所示

Processing config: C:\Users\˧����������\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\nsisconf.nsh
Processing script file: "<stdin>" (ACP)

Error output:
!include: could not find: "C:\Users\帅气的~1\AppData\Local\Temp\t-f6485u\0-messages.nsh"
Error in script "<stdin>" on line 74 -- aborting creation process

解决方法：
如果是普通文件夹为中文，则直接改名字，若是用户文件夹为中文有两个办法
1.百度搜索如何改windows的用户名，使其变成英文
2.打开 node_module/app-builder-lib/out/targets/nsis/NsisTarget.js文件，修改如下内容：

		const args = this.options.warningsAsErrors === false ? [] : ["-WX"];// 搜索此行即可定位
        args.push("-INPUTCHARSET", "UTF8")// 增加此行即可
        for (const name of Object.keys(defines)) {
            const value = defines[name];
            if (value == null) {
                args.push(`-D${name}`);
            }
            else {
                args.push(`-D${name}=${value}`);
            }
        }

PS：方法二只能在当前项目中适用，新的项目需要重新设置