electron官网:https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-first-app
1、安装依赖
npm install electron # 这是原生electron .网上也说可以用vue-cli-pugin-electron-build
npm install electron-packager --save-dev # electron打包插件
npm install terser
npm install @vitejs/plugin-vue-jsx
npm install electron -g
2、vite.config.js部分信息
import {
defineConfig
} from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import vueJsx from "@vitejs/plugin-vue-jsx"; // jsx插件
export default defineConfig({
plugins: [vue(), vueJsx()],
base: './',
publicDir: './public',
envDir: 'env',
resolve: {
//设置路径别名
alias: {
'@': path.resolve(__dirname, './src'),
'*': path.resolve(''),
},
},
server: {
port: 7746,
},
// 引入第三方的配置,强制预构建插件包
optimizeDeps: {
include: ['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文件中,默认true
sourcemap: false, // 构建后是否生成 source map 文件
minify: 'terser', // 混淆器,terser构建后文件体积更小
write: true, //设置为 false 来禁用将构建后的文件写入磁盘
emptyOutDir: true, //默认情况下,若 outDir 在 root 目录下,则 Vite 会在构建时清空该目录。
chunkSizeWarningLimit: 5000000000, //chunk 大小警告的限制
terserOptions: {
compress: {
drop_console: false, // 打包时不删除console.log日志.否则无法调试
drop_debugger: true,
},
} //去除 console debugger
},
});
3、在与src同级目录下新建index.js文件
import {
app,
BrowserWindow,
Menu
} from 'electron'
const createWindow = () => {
const win = new BrowserWindow({
width: 1000,
height: 800,
autoHideMenuBar: true, // 自动隐藏菜单栏
webPreferences: {
// 是否启用Node integration
nodeIntegration: true, // Electron 5.0.0 版本之后它将被默认false
// 是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本.默认为 true
contextIsolation: false, // Electron 12 版本之后它将被默认true
nodeIntegrationInWorker: true,
// 禁用同源策略,允许跨域
webSecurity: false,
// preload: path.join(__dirname, 'preload.js'),
}
})
// 如果没有修改vite端口 默认为5173
win.loadURL("http://localhost:8888")
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
// 在 macOS 系统内, 如果没有已开启的应用窗口
// 点击托盘图标时通常会重新创建一个新窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
});
// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// 当Electron完成初始化时
app.on('ready', () => {
// 清空应用菜单
Menu.setApplicationMenu(null);
});
4、在package.json文件中新增
"main": "index.js",
"scripts": {
"start": "vite",
"build": "vite build",
"preview": "vite preview",
"electron:serve": "vite build & electron . ",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
},
5、运行打包命令
运行:
npm run electron:serve
打包:
npm run packager