1.创建工程
开源的electron构建脚手架：GitHub - electron-vite/electron-vite-vue: 🥳 Really simple Electron + Vite + Vue boilerplate.
1.使用命令创建工程（node版本在16上）
npm create electron-vite
2.项目目录结构
2.安装依赖
1.配置镜像
# 指定 npm 国内淘宝镜像
npm config set registry=https://registry.npmmirror.com/
# 指定 Electron 的国内淘宝镜像地址
npm config set electron_mirror=https://npmmirror.com/mirrors/electron/
2.安装依赖
npm i
3.运行工程
npm run dev
4.打包工程
electron打包需要打包插件
npm i electron-builder -D
在package.json中新增打包命令
"electron:build": "vite build & electron-builder build --config electron-builder.json5"
运行打包命令
npm run electron:build
其他打包方式 在package.json中新增打包命令
"build": "vue-tsc --noEmit && vite build", "package": "electron-builder"
运行打包命令
npm run build
npm run package
配置项
1.vite.config.ts 打包样例模板
import { defineConfig } from 'vite'
import { resolve } from "path"; // 主要用于alias文件路径别名
import vue from '@vitejs/plugin-vue'
import vueJsx from "@vitejs/plugin-vue-jsx"; // jsx插件
export default defineConfig({plugins: [vue(), vueJsx()], // 配置需要使用的插件列表base: './', // 在生产中服务时的基本公共路径publicDir: './public', // 静态资源服务的文件夹, 默认"public" resolve: {alias: {"@": resolve(__dirname, './src'), // 这里是将src目录配置别名为 @ 方便在项目中导入src目录下的文件}},// 引入第三方的配置,强制预构建插件包optimizeDeps: {include: ['echarts', 'axios', 'mockjs'],},css: {preprocessorOptions: {scss: {charset: false, // 关闭编译时 字符编码 报错问题javascriptEnabled: true,additionalData: `@import "${resolve(__dirname, 'src/assets/css/var.scss')}";`,},},},json: {//是否支持从 .json 文件中进行按名导入 namedExports: true,//若设置为 true 导入的json会被转为 export default JSON.parse("..") 会比转译成对象字面量性能更好 stringify: false,},//继承自 esbuild 转换选项，最常见的用例是自定义 JSX esbuild: {jsxFactory: "h",jsxFragment: "Fragment",jsxInject: `import Vue from 'vue'`},// 打包配置build: {target: 'modules', // 设置最终构建的浏览器兼容目标。modules:支持原生 ES 模块的浏览器outDir: 'dist', // 指定输出路径assetsDir: 'assets', // 指定生成静态资源的存放路径assetsInlineLimit: 4096, // 小于此阈值的导入或引用资源将内联为base64编码，设置为0可禁用此项。默认4096（4kb）cssCodeSplit: true, // 启用/禁用CSS代码拆分，如果禁用，整个项目的所有CSS将被提取到一个CSS文件中,默认truesourcemap: false, // 构建后是否生成 source map 文件minify: 'terser', // 混淆器，terser构建后文件体积更小write: true, //设置为 false 来禁用将构建后的文件写入磁盘 emptyOutDir: true, //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。 chunkSizeWarningLimit: 500, //chunk 大小警告的限制 terserOptions: {compress: {drop_console: false, // 打包时不删除console.log日志.否则无法调试drop_debugger: true,},} //去除 console debugger},// 本地运行配置，及反向代理配置server: {port: 8888,cors: true, // 允许跨域hmr: true, // 开启热更新open: true, // 在服务器启动时自动在浏览器中打开应用程序strictPort: false, // 设为 false 时，若端口已被占用则会尝试下一个可用端口,而不是直接退出https: false, // 是否开启 httpscors: true, // 为开发服务器配置 CORS。默认启用并允许任何源// proxy: { // 为开发服务器配置自定义代理规则// // 字符串简写写法 // '/foo': 'http://192.168.xxx.xxx:xxxx', // // 选项写法// '/api': {// target: 'http://192.168.xxx.xxx:xxxx', //代理接口// changeOrigin: true,// rewrite: (path) => path.replace(/^\/api/, '')// }// }},base: './', // 打包路径
})简易模板
import { defineConfig } from 'vite'
import path from 'node:path'
import electron from 'vite-plugin-electron/simple'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue(),electron({main: {entry: 'electron/main.ts',},preload: {input: path.join(__dirname, 'electron/preload.ts'),},renderer: process.env.NODE_ENV === 'test'? undefined: {},}),],server: {port: 8888,cors: true, // 允许跨域hmr: true, // 开启热更新},base: './', // 打包路径
})