【electron-vue】安装+解决错误

罗布猪咪

已于 2023-09-20 18:08:44 修改

阅读量976

点赞数

文章标签： electron vue.js javascript

于 2023-09-19 13:39:26 首次发布

本文链接：https://blog.csdn.net/qq_42740449/article/details/133021062

版权

前言

根据参考文献进行安装electron-vue时出现错误，特来记录问题并追溯

当前版本

>node -v
v16.20.2
>npm -v
8.19.4
>vue -V
@vue/cli 5.0.8

实操和问题记录

参考博客electron vue 搭建

通过vue-cli开始搭建electron-vue
vue init simulatedgreg/electron-vue projectName
os：这里拉取的时间较久，选一个网速好的场景
后续操作参考博客

执行npm install遇到的错误

npm ERR! code 1
npm ERR! path F:\vue\electron\electron-0919\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: D:\Program Files\nodejs\node.exe F:\vue\electron\electron-0919\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'D:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'F:\\vue\\electron\\electron-0919\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]

在package.json里修改了node-sass版本

"node-sass": "^6.0.1",
"sass-loader": "^7.0.3",

具体操作

运行	 	npm install --save-dev node-sass
切换淘宝镜像	npm config set registry=https://registry.npmmirror.com/

重新安装 npm i = npm install
PS F:\vue\electron\electron-0919> npm i   
up to date in 3s
103 packages are looking for funding
  run `npm fund` for details
PS F:\vue\electron\electron-0919> npm run dev
> electron-0919@0.0.1 dev
> node .electron-vue/dev-runner.js

运行结果

在这里插入图片描述

附录

> An electron-vue project

#### Build Setup

```bash
# install dependencies
npm install

# serve with hot reload at localhost:9080
npm run dev

# build electron application for production
npm run build

This project was generated with electron-vue using vue-cli. Documentation about the original structure can be found here.

环建配置

问题一

代码里面有

<style lang="less" scoped>
<style>
scoped属性表示使该样式模块化，加上scoped后，vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，在浏览器中的渲染结果

结果运行时报错

ERROR in ./src/renderer/components/CommonHead.vue
  Module not found: Error: Can't resolve 'less-loader' in 'F:\vue\electron\electron-09
19'
   @ ./src/renderer/components/CommonHead.vue 4:0-95                      \
   @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-lo\electron-0919'                                                    ?vue-loa
   @ ./src/renderer/components/CommonHead.vue 4:0-95               pe=scri
   @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib?e&type=s?vue-losrc/renderer/components/LandingPage/SystemInformation.vue?vue&type=ader-options!./src/renderer/components/LandingPage/SystemInformatio?vue-loan.vue?v
ue&type=script&lang=js&
   @ ./src/renderer/components/LandingPage/SystemInformation.vue?vu?vue-lo   @ ./src/renderer/components/CommonHead.vue 4:0-95
   @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/components/LandingPage/SystemInformation.vue?vue&type=script&lang=js&
   @ ./src/renderer/components/LandingPage/SystemInformation.vue?vue&type=script&lang=js&
   @ ./src/renderer/components/LandingPage/SystemInformation.vue
   @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/components/LandingPage.vue?vue&type=script&lang=js&
   @ ./src/renderer/components/LandingPage.vue?vue&type=script&lang=js&
   @ ./src/renderer/components/LandingPage.vue
   @ ./src/renderer/router/index.js
   @ ./src/renderer/main.js
   @ multi ./.electron-vue/dev-client ./src/renderer/main.js

执行npm install less-loader@* --save-dev 添加包，发现不兼容

PS F:\vue\electron\electron-0919> npm install less-loader@* --save-dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: electron-0919@0.0.1      
npm ERR! Found: webpack@4.47.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.15.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.0.0" from less-loader@11.1.3
npm ERR! node_modules/less-loader
npm ERR!   dev less-loader@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\LENOVO\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\LENOVO\AppData\Local\npm-cache\_logs\2023-09-19T07_13_17_966Z-debug-0.log

功能：在electron-vue中读取txt文件

在electron-vue中读取txt文件

安装npm i fs
在 .vue里添加

<template>
    <div >
        <button  @click="linkButton"  >读取txt内容</button>
        <div  >{{ gg }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gg:"",
      tableData: []
    }
  },
  methods: {
    linkButton(){
      const fs = require('fs')
      const filePath = './Hardware.txt';
      const fileContent = fs.readFileSync(filePath, 'utf-8');
      console.log(fileContent)
      this.gg = fileContent
    }
  }
}
</script>

运行结果

在这里插入图片描述

功能：生成exe文件

npm run build

问题一：electron-vue用build打包时报 ‘tasks’ 错误

 npm run build

> electron-0919@0.0.1 build
> node .electron-vue/build.js && electron-builder

F:\vue\electron\electron-0919\.electron-vue\build.js:45
  const tasks = new Listr(
        ^

SyntaxError: Identifier 'tasks' has already been declared

参考博客 electron-vue用build打包时报 ‘tasks’ 错误？
将.electron-vue的build.js中的这段话注释

async function build () {
  greeting()

  del.sync(['dist/electron/*', '!.gitkeep'])

  // const tasks = ['main', 'renderer']
  // const m = new Multispinner(tasks, {
  //   preText: 'building',
  //   postText: 'process'
  // })

  let results = ''

问题二：electron-vue用build打包时报 ‘tasks’ 错误

 npm run build
 
 ⨯ part download request failed with status code 401
github.com/develar/app-builder/pkg/download.(*Part).doRequest
        /Volumes/data/Documents/app-builder/pkg/download/Part.go:128
github.com/develar/app-builder/pkg/download.(*Part).download
        /Volumes/data/Documents/app-builder/pkg/download/Part.go:66
github.com/develar/app-builder/pkg/download.(*Downloader).DownloadResolved.func1.1 
        /Volumes/data/Documents/app-builder/pkg/download/downloader.go:114
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2
        /Volumes/data/Documents/app-builder/pkg/util/async.go:67
runtime.goexit
        /usr/local/Cellar/go/1.12.6/libexec/src/runtime/asm_amd64.s:1337

Error: F:\vue\electron\electron-0919\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code 1

换了网自己下载网址
这个下载好了放在C:\Users\xx\AppData\Local\electron\Cache路径下
https://github.com/electron/electron/releases/download/v2.0.18/electron-v2.0.18-win32-x64.zip

https://github.com/electron-userland/electron-builder-binaries/releases/download/w/download/winCodeSign-2.4.0/winCodeSign-2.4.0.7z
这大概就是build好了

 OKAY  take it away `electron-builder`

  • electron-builder version=20.44.4
  • loaded configuration file=package.json ("build" field)
  • writing effective config file=build\builder-effective-config.yaml
  • no native production dependencies
  • packaging       platform=win32 arch=x64 electron=2.0.18 appOutDir=build\win-unpacked
  • downloading     parts=1 size=5.6 MB url=https://github.com/electron-userland/electron-builder-binaries/releases/download/w/download/winCodeSign-2.4.0/winCodeSign-2.4.0.7z
  • downloaded      duration=23m17.43s url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.4.0/winCodeSign-2.4.0.7z
  • building        target=nsis file=build\electron-0919 Setup 0.0.1.exe archs=x64 oneClick=true perMachine=false  
  • downloading     parts=1 size=1.4 MB url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.3.2/nsis-3.0.3.2.7z
  • downloaded      duration=1m6.535s url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.3.2/nsis-3.0.3.2.7z
  • downloading     parts=1 size=1.0 MB url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.3.0/nsis-resources-3.3.0.7z
  • downloaded      duration=36.312s url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.3.0/nsis-resources-3.3.0.7z
  • building block map blockMapFile=build\electron-0919 Setup 0.0.1.exe.blockmap

exe的文件路径存在，分为打包好的exe和win-unpacked
在这里插入图片描述
如下图，在win-unpacked中放入需要读取的 ./Hardware.txt，实验是可以访问txt数据，也可以将exe文件放进去，哈哈哈，开心

为什么打包好的exe文件不能访问当前路径下的本地exe和txt？