启动成功显示 Hello World! 二. 项目打包 通过将vue项目打包, 会生成一个dist文件 三. 修改electron-quick-start 文件 删除electron-quick-start 文件中的index.html,把vue项目打包的dist文件放进去。 打开electron-quick-start 文件里的main.js文件,附上mian.js完整代码 重点是: mainWindow.loadFile(“./dist/in...
我用的技术栈是electron+vue3+vite+ts。后端是php。我就用我开发的公司OA系统来讲解,该项目前后端都是我一个人完成。 目录结构 标注红色字的目录是我主要用到的。 步骤一: 安装electron-builer打包工具,在终端运行npm install electron-builer 安装electron-icon-builder图标生成工具,终端运行 npm i electron-icon...
1、到这里其实打包就已经成功完成了,但你打开exe后会发现与在项目中窗体运行不一样,或者直接白屏,这是由于vue与electron路由模式的原因,vue一般默认history模式。 2、需要在router的index.js中修改:从vue-router中引入createWebHashHistory,将createWebHistory(process.env.BASE_URL)改为createWebHashHistory(process.env...
npm run electron 5、使用内置web渲染vue Electron 中启动一个内置的 Node.js Web 服务器来渲染用 Vue.js 编写的页面,可以使用express或其他类似的 Node.js Web 框架。以下是一个基本的实现步骤: 5.1 安装依赖 首先,确保您已安装express和vue相关的依赖。可以通过 npm 安装: npm install express 5.2 设置 Expres...
开发完vue项目后想打包成桌面应用程序的话,可以使用electron 在项目根目录加两个文件 1、main.js // 导入模块const{app,BrowserWindow}=require("electron");constpath=require("path");// const NODE_ENV = "development"; //开发环境;//process.env.NODE_ENV;constNODE_ENV="process.env.NODE_ENV";//开发...
Electron桌面应用打包现有的vue项目 1 环境准备 Node:v16.20.2(本地vue项目nodejs版本) Electron:22.3.7 vue:2 版本管理 2 Vue项目准备 更新相关依赖 npm install --registry https://registry.npmmirror.com/ npm run dev 3、引入Electorn 安装指定版本Electron:npm install electron --save-dev...
vue create vue-project 2.安装electron vue add electron-builder 会自动安装相关依赖 安装成功后会在src下自动生成一个background.js文件就是相应的electron的配置信息 'use strict' import { app, protocol, BrowserWindow } from 'electron' import { createProtocol } from 'vue-cli-plugin-electron-builder/lib...
【Electron-Vue】构建桌面应用(2)-打包生成可window安装包,1.前言在上篇文章中说到,使用Electron-Vue去构建一个Vue项目,并且可以通过package命令之后,生成了一些列的绿色文件(即执行安装包之后生成的文件),点击其中的exe文件就可以运行了。由于安装程序最后会以安装
在命令行输入:vue init webpack myapp 其中“myapp”是我的项目名。 图5 完成后如下: 图6 图7 执行命令,出现如下效果说明项目已经运行成功: npm run dev 图8 执行生成命令: npm run build 注意: 生成的时候一定要修改index.js 中的生成路径,否则后面程序运行打包页面会显示空白,找不到路径 ...