vue3项目使用Electron打包成exe的方法与打包报错解决

将vue3项目打包成exe文件方法

一、安装

1.安装electron

复制代码
npm install electron --save-dev

npm install electron-builder --save-dev

2.在vue项目根目录新建文件index.js

javascript 复制代码
// index.js

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('./dist/index.html')

  // Open the DevTools.
  // 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', () => {
    // 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文件编辑

javascript 复制代码
"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.测试

javascript 复制代码
npm run electron:serve

5.打包

javascript 复制代码
npm run electron:build

二、报错解决

解决:打开cmd 执行 npm config edit

javascript 复制代码
npm config edit

打开配置文件 粘贴以下内容

javascript 复制代码
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/
相关推荐
玉宇夕落3 分钟前
🔥 一行代码让网页“活”起来!前端黑科技 Stylus + Flex 实战,小白也能写出酷炫交互动画!
前端·javascript
Mintopia4 分钟前
🌌 AIGC与AR/VR结合:Web端沉浸式内容生成的技术难点
前端·javascript·aigc
烟袅4 分钟前
在浏览器中做 NLP?用 JavaScript 实现文本分类的实用探索
javascript·nlp
白兰地空瓶6 分钟前
当神经网络跑在浏览器里:brain.js 前端机器学习实战
javascript·人工智能
我爱画页面7 分钟前
vue3封装table组件及属性介绍
开发语言·javascript·ecmascript
逻极7 分钟前
Next.js vs Vue.js:2025年全栈战场,谁主沉浮?
开发语言·javascript·vue.js·reactjs
一枚前端小能手8 分钟前
🗂️ Blob对象深度解析 - 从文件处理到内存优化的完整实战指南
前端·javascript
杰克尼8 分钟前
vue-day02
前端·javascript·vue.js
一只小阿乐8 分钟前
vue3 中实现父子组件v-model双向绑定 总结
前端·javascript·vue.js·vue3·组件·v-model语法糖
星光一影10 分钟前
快递比价寄件系统技术解析:基于PHP+Vue+小程序的高效聚合配送解决方案
vue.js·mysql·小程序·php