完整版vue创建桌面应用与打包遇到的坑！

浅谈一下，为什么打包时会遇到那么多坑，比如：

甚至打完包之后，会打成.exe后缀，但是会出现白屏？？？？？

答案：请参考我的background.js！！！！！！ 路径能把人折磨短路~

const { createProtocol } = require('vue-cli-plugin-electron-builder/lib')


 mainWindow.loadURL('app://./index.html') // 生产模式下加载静态文件

vue创建桌面应用与打包实战

1.创建项目

vue create ly

2.cd ly 执行 electron-builder

vue add electron-builder

3.运行项目

npm run electron:serve

配置 在项目根目录创建vue.config.js

const {defineConfig} = require('@vue/cli-service');
module.exports = {
  lintOnSave: false,
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  pluginOptions: {
   
  }
};

打包命令

npm run electron:build

妥妥的bug

解决方案：

无效方法：上面告诉你要下载一个electron-v13.6.9-win32-x64.zip （很多小伙伴肯定很郁闷，下载怎么这么慢还不能用，郁闷到住了，OK，咱来给你方法！）

有效方法：在目录下建立一个.npmrc

electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

新增：

1.如何改名字和图标？

1.名字：在package.json页面修改项目名称

尺寸：256*256

background.js:

const { app, BrowserWindow } = require('electron')
const path = require('path')
const { createProtocol } = require('vue-cli-plugin-electron-builder/lib')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 1500,
    height: 1100,
    x: 20, 
    y: 20,
    icon: path.join(__dirname, 'icon.ico'),
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
      webSecurity: true
    },
  })
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:8080') // 开发模式下加载开发服务器
  } else {
    createProtocol('app') // 创建协议
    mainWindow.loadURL('app://./index.html') // 生产模式下加载静态文件
  }
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

npm run electron:build打包：

点击.exe安装，出现白屏：请看我的文档自行去更改，在background.js里面。