vue3使用Electron打包成exe的方法与打包报错解决
作者：梦翼横空
在前端开发中,Electron是一种常用的工具,它允许开发者使用Web技术构建桌面应用程序,本文主要介绍了vue3使用Electron打包成exe的方法与打包报错解决,具有一定的参考价值,感兴趣的可以了解一下
一、安装
1.安装electron
npm install electron --save-dev npm install electron-builder --save-dev
2.在vue项目根目录新建文件index.js
// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow,Menu } = require('electron')
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // 启用 Node.js 集成
contextIsolation: false, // 禁用上下文隔离（Node.js 集成的一个选项）
webSecurity: false, // 禁用同源策略
contextIsolation: false,
session: {
cookies: true // 这行确保启用了cookie
}
},
icon: 'build/.icon-ico/icon.ico'//这里是自动生成的图标，默认情况下不需要改
})
// and load the index.html of the app.
mainWindow.loadFile('./dist/index.html')//如果要本地化，这样写，如果写远程的，那这里就是请求的域名
//隐藏顶部菜单
// mainWindow.setMenu(null);
// Open the DevTools.
// Open the DevTools.
//mainWindow.webContents.openDevTools()
mainWindow.maximize();//默认最大化
}
//设置中文菜单，默认是英文的
const createMenu = () => {
const template = [
{
label: '文件',
submenu: [
{
label: '退出',
accelerator: 'CmdOrCtrl+Q',
click: () => {
app.quit();
}
}
]
},
{
label: '查看',
submenu: [
{ label: '重新加载', accelerator: 'F5', role: 'reload' },
{ label: '全屏', accelerator: 'F11', role: 'togglefullscreen' },
{ label: '开发者工具', role: 'toggledevtools' }
]
}
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
}
// 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()
createMenu()//菜单设置
app.on('activate', () => {
// 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()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.3.package.json文件编辑
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service build && electron-builder",
"electron:serve": "electron ."
},
"build": {
"productName": "这里是你的项目名",
"appId": "com.example.这里是appId",
"win": {
"icon": "favicon.ico",
"target": ["nsis", "appx"]
},
"directories": {
"output": "build"
},
"files": [
"dist/**/*",
"index.js"//这里是刚才建的index.js
]
},4.测试
npm run electron:serve
5.打包
npm run electron:build
二、报错解决
解决：打开cmd 执行 npm config edit
npm config edit
打开配置文件 粘贴以下内容
registry=https://registry.npm.taobao.org/ sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs electron_mirror=https://npm.taobao.org/mirrors/electron/ ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
三、使用
真正用的时候会出现各种，比例启动exe的图标，cookie。
还有就是，平时我的打包项目不需要指定域名，如果这里用本地化就需要指定域名。
默认配置是不开启cookie的，还有就是用cookie不太好，每次启动exe都需要登录太麻烦了，推荐使用localStorage永久保存。
我的cookie示例，打包exe时使用localStorage，其他情况下使用cookie：
setCookie(cname, cvalue)
{
if(process.env.NODE_ENV === "host"){
localStorage.setItem(cname, cvalue);
}else{
document.cookie = cname + "=" + cvalue
}
// var d = new Date();
// d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
// var expires = "expires=" + d.toUTCString();
//document.cookie = cname + "=" + cvalue
},
getCookie(cname) {
if(process.env.NODE_ENV === "host"){
return localStorage.getItem(cname);
}else{
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) != -1) {
return c.substring(name.length, c.length);
}
}
return "";
}
},
clearCookie(cname) {
if(process.env.NODE_ENV === "host"){
localStorage.removeItem(cname);
}else{
var d = new Date();
d.setTime(-1);
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=''; " + expires;
}
},
其他代码一并粘出来分享一下。
main.js
const env = process.env.NODE_ENV || 'development';
if(env === "host"){//如果是打包exe需要指定接口域名
axios.defaults.baseURL = process.env.VUE_APP_INTERFACE
axios.defaults.withCredentials = true;//跨域请求的全局凭证
}
package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service build --mode host && electron-builder",//使用.env.host配置打包exe
"electron:serve": "electron ."
},
"build": {
"productName": "newsaas",
"appId": "com.example.newsaas",
"win": {
"icon": "./icon256.png",//这里是启动图标必须是256*256的png图
"target": [
"nsis",
"appx"
]
},
"mac": {
"target": "dmg"
},
"nsis": {
"oneClick": true,
"allowToChangeInstallationDirectory": true,
"perMachine": true,
"allowElevation": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "index"
},
"directories": {
"output": "build"
},
"files": [
"dist/**/*",
"index.js",
"public/favicon.ico"
]
},.dev
NODE_ENV="" VUE_APP_INTERFACE="这里是我的接口域名，只能本地开发时，做代理用，打包不影响"
.dev.host
NODE_ENV="host" VUE_APP_INTERFACE="http://这里是我的接口域名"
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
devServer:{
port:8080,
allowedHosts: "all",
webSocketServer:false,
proxy:{
"/":{
target: process.env.VUE_APP_INTERFACE,
changeOrigin:true,
pathRewrite:{
"^/":"/"
}
}
}
},
transpileDependencies: true,
publicPath: './',
// 输出文件目录
assetsDir: 'static',
outputDir: process.env.outputDir,
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false
})
以上就是全部代码，如果安装不了electron，或是安装后运行不起来，改一下npm镜像源试试，package-lock.json这个文件记得删除。
到此这篇关于vue3使用Electron打包成exe的方法与打包报错解决的文章就介绍到这了,更多相关Electron打包成exe与报错解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！