Electron Forge文档:https://www.electronforge.io/ npm init electron-app@latest my-app -- --template=vite 可选模板 webpack webpack-typescript vite vite-typescript 安装VUE npm install --save vue 修改Vite配置 脚手架生成的Vite配置文件有三个,分别是vite.main.config.mjs、vite.reload.config.mjs和v...
因为Electron Forge入口文件是main.js, vue默认也是main.js, 这里把vue主文件改为其它名称 <!doctype html>Vite + Vue 启动 在package.json中默认会有如下配置。 "scripts": { "start": "electron-forge start", "package": "electron-forge package", "make": "electron-forge make", "publish...
"electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron .":等待端口3000上的服务器启动,环境变量IS_DEV为true,然后启动 Electron 应用; "electron:dev": "concurrently -k \"cross-env BROWSER=none yarn dev\" \"yarn electron\"":使用concurrently同时执行两个命令; cross-env BROWSER=none ...
这里修改vite.renderer.config.mjs如下。 import{defineConfig}from'vite';importvuefrom'@vitejs/plugin-vue'import{resolve}from'path'// https://vitejs.dev/configexportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{'@':resolve(__dirname,'./src'),}},}); 修改index.html文件 因为Electron Fo...
'./':"",plugins: [vue()] }) 因为base的设置在ELECTRON环境下与网站不同。 第5 步: 在项目根文件夹创建一个新的文件夹electron,并在其中创建文件electron.js // electron/electron.jsconstpath =require('path');const{ app,BrowserWindow} =require('electron');constisDev = process.env.IS_DEV=="...
"scripts":{"dev":"vite","build":"vite build","preview":"vite preview","start":"cd electron && npm run start"}, 这样每次在根目录运行npm run start就可以了。 二.开发完毕,进入生产环节 1.打包vue:运行npm run build; 把dist文件夹的所有文件复制到electron文件夹下,index.html文件也替换掉。
新建electron-main/index.ts文件 import { app, BrowserWindow } from "electron"; import* as path from "path";//本地启动的vue项目路径const localAddress = "http://localhost:5173";//创建一个新的窗口const createWindow = () =>{ const win=newBrowserWindow({ ...
1、vue3的搭建 npm init @vitejs/app project-name cd project-name npm install npm run dev 1. 2. 3. 4. 浏览器里可以看到页面。vite+vue就搭建好了 2、electron安装 安装electron 这里使用镜像 根目录添加一个 .npmrc文件 加上electron_mirror=http://cdn.npm.taobao.org/dist/electron/ ...
有了Vue3 项目构建出来的 dist 目录之后, 设置Electron 就很简单了。 首先,我们在项目的根目录下,创建 main.js 文件。 并将, Elctron 官方文档中的, main.js 文件内容 copy 过来就可以了。 内容如下: const { app, BrowserWindow } = require("electron"); ...
简介:基于Vite+Vue3+Electron整了一个桌面应用模板 前言: 随着前端的更新迭代,基于js/ts开发的桌面应用框架也越来越多,从heX,electron,nwjs到tauri,Qt,以及Rn和flutter也有桌面应用业务。 而今天的主角正是electron,作为一款2013年推出的桌面应用开发框架,其运行于Chromium内核以及node平台,使得开发者可以使用html+css...