app.vue中引入electron调用失败？

来源：蜘蛛抓取(WebSpider) 时间：2022-04-29 13:47 标签： vue项目启动报错

上篇博客中讲到使用第三方软件将项目打包成windows安装包，问题解决之后，这次需要处理调用项目之外的exe程序。

整个项目的需求拆分为以下几点

  1. 使用Electron来解决跨平台桌面应用(由于之前学过vue，没有实战过，所以打算electron和vue一起练手，所以选用了Electron-Vue)。
  2. 打包之后的程序，需要提供给用户一键式安装，所以需要将所有的前端代码以及后台提供的exe文件一起打包为可安装的文件。
  3. 用户安装之后，打开桌面应用的同时，启动后台服务，以便用户操作桌面应用时能够和后端服务通信。
  4. 用户关闭应用时，终止后台服务(其实应该就是杀死进程)。

在前面的博客中解决了打包成安装程序的功能，但只是打包了前端代码，并没有将后台exe文件打包，并且在安装的时候也没有去启动后台服务。接下来就研究一下怎么在启动桌面应用时去启动后台exe文件(其实就是怎么在前端electron-vue框架中怎么调用exe文件的问题)。

我们知道mian/index.js是关于Electron的配置，包括窗体配置，生命周期配置等，由于需要在启动的时候去调用exe，所以我们需要在其ready生命周期中去调用命令执行。

1.配置exe执行目录

于是我们需要在main/index.js中做如下配置：

  • 由于node中带有执行exe的API，所以直接拿来使用就行
  • 如果在开发环境下测试调用exe文件，则需要使用__dirname来获取当前目录路径，我这里直接把可执行文件test.exe文件和index.js放到同一个目录下，是为了方便测试使用，如果你选择放到其他位置，可以修改对应的路径
  • 打包环境下，路径就不能使用__dirname来获取，需要使用相对路径，但是一定要注意，它这里的相对路径。
  • 打包环境下相对路径：这里的相对路径就是相对于package之后的主执行程序所在的目录，如下。由于后台exe应该和前端代码是相对独立的，所以我在package之前不会将它放到前端代码的目录下，也不应该这么做。打开package之后的目录，放到根目录下即和主程序在同一目录下，所以在打包环境下，我是用的是这种路径：

为了方便，我把整个js文件粘出来

在使用package命令打包的之前，我们需要执行下面这条命令，重新生成一下dist文件，为什么要生成dist文件呢？

可以看到下图中，在package.json中，配置的只要入口文件时dist/ecectron/main.js，所以需要通过pack命令生成对应的文件。

5.将后台exe文件copy到打包的项目根目录下

7.安装后，启动项目，查看安装后的目录文件查看exe输出结果

  • 回答 2 已采纳 找到问题所在了. 因为用了 sass 是不能用{}语法的.

  • 回答 4 已采纳 参数reset不存在。es5是没有export的，您可能需要对UglifyJs进行封装，或者换一个lib

  • 启动项目服务，这样就可以使用localhost:8080访问了。 可以参考http

  • 回答 3 已采纳 Eslint是语法检查插件，它会严格要求你的代码，就你本身代码没错，但是一运行，Eslint就跳出来报错了。它会自动检查你的代码是否符合规范。所以，建议新手入门Vue创建项目的时候可以关掉Eslint

  • 回答 6 已采纳 你没权限吧我觉得应该是

  • 报错如下： （还有的是控制台弹窗报错） 先看看项目目录结构： |--dist

  • 回答 5 已采纳 不是这个问题，你要把安装文件清楚干净，在去处理

  • 回答 1 已采纳 根据官方风格指南，除了根组件（App.vue）外，自定义组件名称应该由多单词组成，防止和html标签冲突。而最新的vue-cli创建的项目使用了最新的vue/cli-plugin-eslint插件，在

  • 最近公司在做物管小程序项目，用到的组件是uni-app，官方文档给出的答案是在hbuilder下载完插件后，直接在template里面引用，但是怎么都查找不到。 报错显示如图 解决思路 碰到这个问题，首先我会看自己是否成功...

  • 最近写了一个vue插件，发布到npm后，准备测试一下看是否能成功下载使用，使用cnpm一直下载不成功，一直报404错误： 于是换为npm i nav-follows -S，也是报错： 然后也清除了npm缓存，问题依然没解决，最后发现是在...

  • 没有解决我的问题, 去提问

我要回帖

更多关于 vue项目启动报错 的文章

 

随机推荐