IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> electron打包现成的vue项目成.exe文件,build打包vue项目(quasar 框架) -> 正文阅读

[JavaScript知识库]electron打包现成的vue项目成.exe文件,build打包vue项目(quasar 框架)

前言: 公司已有web端vue项目,现在有需求,需要把web端的该项目用electron打包成 .exe 可执行文件。

思考:打包成 .exe 文件,首先需要将vue项目在本地打包成静态可运行文件,其次使用electron将build后的文件打包成 .exe 可执行文件。

步骤:
一、 在 quasar.conf 文件中进行构建配置,位置在build属性下面:
1、
具体配置哪些配置项,可以参考quasar官方文档:quasar.conf.js build 属性配置

build: {
      // vueRouterMode: "history", // available values: 'hash', 'history'  一定要把这个注释掉
      publicPath: "/llllll/electron_demo/csy-vclass-osc-app/dist/spa",
    
      }
    },

注意:publicPath 这个公共路径必须设置为与打包位置一致,否则运行文件会出现资源找不到的报错。

2、 在控制台运行 quasar build 生成打包文件,默认在dist文件夹的spa里面,控制台输入如下内容则表示构建成功
在这里插入图片描述

最后一行 为打包生成的文件所在路径,也就是在quasar.conf.js中设置的publicPath。
最后生成一个文件夹如图,直接打开index.html正常显示即可。
在这里插入图片描述到此vue项目构建打包已经完成。
注意:如果index.html打开是空白的,打开控制台查看是否是资源路径配置的问题

二、 下载electron
1、 由于github比较慢,这里使用gitee中的项目,克隆该项目即可https://gitee.com/shf0824/electron-quick-start.git

git clone https://gitee.com/shf0824/electron-quick-start.git

2、 双击项目中index.html文件,运行,可以成功看到下图即可
在这里插入图片描述三、 用electron打包dist中的文件生成.exe文件
1、 将dist/spa中的所有文件放到克隆下来的electron项目的根目录中
2、 安装electron-packager插件。确保在electron项目中,在控制台输入如下命令安装插件

npm install electron-packager --save-dev
3、在electron项目中,package.json文件中,"scripts"属性下面添加如下代码
"pack": "electron-packager . 'health-terminal' --platform=win32 --arch=x64  --out=./out --asar --app-version=0.0.1"

在这里插入图片描述4、 执行 npm run pack 使用electron将文件打包成 .exe 文件。
成功的话,默认会在electron根路径下的out文件夹中看到生成的可执行文件夹,里面有可执行文件。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-11 22:04:44  更:2022-03-11 22:08:38 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 7:44:36-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码