一、vite创建新项目

pnpm create vite

二、安装项目依赖

pnpm add -D concurrently cross-env electron electron-builder electron-packager wait-on

三、修改package.json文件

添加build节点

"build": {"appId": "com.my-website.my-app","productName": "MyApp","copyright": "Copyright © 2022 ${author}","mac": {"category": "public.app-category.utilities"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets","output": "dist_electron"},"electronDownload": {"mirror": "https://npm.taobao.org/mirrors/electron/"}},

修改scripts节点

"scripts": {"dev": "vite","build": "vite build","serve": "vite preview","start": "electron .","packager": "electron-packager ./dist/ --platform=win32 --arch=x64 --overwrite","electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron .","electron:dev": "concurrently -k \"cross-env BROWSER=none npm run dev\" \"npm run electron\"","electron:build.win": "npm run build && electron-builder --win --dir","electron:build.linux": "npm run build && electron-builder --linux appImage","electron:build.test": "npm run build && electron-builder --dir","electron:build.exe": "npm run build && electron-builder --win"},

添加main节点

{"main": "electron/electron.js",
}

package.json总体代码展示

{"name": "integrated-pc","author": "wh","private": true,"version": "1.0.0","scripts": {"dev": "vite","build": "vite build","serve": "vite preview","start": "electron .","packager": "electron-packager ./dist/ --platform=win32 --arch=x64 --overwrite","electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron .","electron:dev": "concurrently -k \"cross-env BROWSER=none npm run dev\" \"npm run electron\"","electron:build.win": "npm run build && electron-builder --win --dir","electron:build.linux": "npm run build && electron-builder --linux appImage","electron:build.test": "npm run build && electron-builder --dir","electron:build.exe": "npm run build && electron-builder --win"},"build": {"appId": "com.my-website.my-app","productName": "MyApp","copyright": "Copyright © 2022 ${author}","mac": {"category": "public.app-category.utilities"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets","output": "dist_electron"},"electronDownload": {"mirror": "https://npm.taobao.org/mirrors/electron/"}},"main": "electron/electron.js","dependencies": {"ant-design-vue": "^2.2.8","axios": "^0.26.0","js-cookie": "^3.0.1","path": "^0.12.7","vue": "^3.2.25","vue-router": "^4.0.12"},"devDependencies": {"@types/node": "^17.0.21","@vitejs/plugin-vue": "^2.2.0","concurrently": "^7.0.0","cross-env": "^7.0.3","electron": "^17.1.0","electron-builder": "^22.14.13","electron-packager": "^15.4.0","sass": "^1.49.8","typescript": "^4.5.4","vite": "^2.8.0","vue-tsc": "^0.29.8","wait-on": "^6.0.1"}
}

四、修改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({base: process.env.ELECTRON=="true" ? './' : "",plugins: [vue()]
})

五、在项目根文件夹创建一个新的文件夹electron，并在其中创建文件electron.js

// electron/electron.js
const path = require('path');
const { app, BrowserWindow } = require('electron');const isDev = process.env.IS_DEV == "true" ? true : false;function createWindow() {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {//preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,},});// and load the index.html of the app.// win.loadFile("index.html");mainWindow.loadURL(isDev? 'http://localhost:3000': `file://${path.join(__dirname, '../dist/index.html')}`);// Open the DevTools.if (isDev) {mainWindow.webContents.openDevTools();}
}// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {createWindow()app.on('activate', function () {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow()})
});// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});

完成

pnpm run dev //浏览器开发
pnpm run build //electron打包
pnpm run start //electron开发
pnpm run electron:build.exe //win打包

vue3+vite+electron项目搭建相关推荐

vue3+vite+ant-design-vue项目搭建
vite官方传送门:Vite | 下一代的前端工具链使用如下命令安装vue3+vite项目. my-vue-app是项目名称 npm create vite@latest my-vue-app - ...
vite+vue3+ts+element-plus项目搭建--超详细
vite+vue3+ts+element-plus项目搭建–超详细 vite 作用快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待 ...
使用vue3 +vite + typeScript + elementPlus搭建一个项目脚手架
使用vue3 + vite + elementPlus搭建一个项目脚手架这篇文章就教大家如何使用vue3+vite+ts+element-plus搭建一个项目,步骤详细,献给不爱看文档的诸位,希望这 ...
vue3+vite配置项目运行前eslint检查以及git提交前eslint检查的方案总结
vue3+vite配置项目运行前eslint检查以及git提交前eslint检查的方案总结 1.需求背景最近在新项目搭建过程中有这样一个需求:由于是团队协同开发,所以在开发是代码规范是一个很重要的环 ...
快速简洁的Vue+Electron项目搭建教程
Vue+Electron项目搭建教程最近写一个项目,需要使用Electron集成Vue,特此记录搭建过程 Vue+Electron 常用搭建方式在之前,通常我们会使用electron-vue脚手架 ...
vue3+ts+vite自适应项目——搭建项目
系列文章目录第一章:搭建项目目录系列文章目录前言一.搭建项目二.安装sass 1.安装依赖 2.测试三.引入element-plus 1.引入库 1.1 安装 2.2引入插件 2.3测试 ...
Vue3+Vite+TS+Eslint搭建生产项目
目录一.初始化一个vite项目: 二.配置prettier,使用prettier进行语法规范三.将ESLint的错误显示在浏览器界面一.初始化一个vite项目: yarn create vit ...
vue2.0 项目搭建和vue 2.0 electron 项目搭建
1.关于electron vue 项目的搭建全局或者局部安装项目vue:脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electron ...
【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录前言创建项目安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...

vue3+vite+electron项目搭建

vue3+vite+electron项目搭建

一、vite创建新项目

二、安装项目依赖

三、修改package.json文件

添加build节点

修改scripts节点

添加main节点

package.json总体代码展示

四、修改vite.config.js

五、在项目根文件夹创建一个新的文件夹electron，并在其中创建文件electron.js

完成

vue3+vite+electron项目搭建相关推荐

最新文章

热门文章