electron集成若依，打包成exe文件

首先需要版本号大于14.0.0的较新的node版本

建议最好先安装淘宝镜像源

npm config set registry https://registry.npm.taobao.org

查看是否安装成功

cnpm -v

然后执行 cnpm install electron --save-dev

📝1.添加打包工具

vue add electron-builder

📝2.配置electron镜像地址

npm config set registry http://registry.npm.taobao.org/

npm config set electron_mirror="https://npm.taobao.org/mirrors/electron/"

npm config set electron_builder_binaries_mirror="http://npm.taobao.org/mirrors/electron-builder-binaries/"

📝3.项目中设置跨域（访问不到后端接口）

打开env.development文件

VUE_APP_BASE_API = '线上地址/prod-api'

📝4.进行打包 npm run electron:build // 打包命令

打包成功后会在dist_electron中生成了exe文件，点击安装即可

📝5.设置应用图标

需要256*256，格式为ico，注意，不能采用直接修改后缀名的方式，需要使用专门的网站转换

打开 background.js文件 在createWindow事件里面

const win = new BrowserWindow({ width: 800, height: 600, icon: 'src/assets/logo/logo.ico', })

在build文件夹里 新增一个 256X256的名字为icon的ico文件

📝6.登录成功不能跳转

是因为jscookie的问题，将登录页面 （login）页面的所有cookies修改成  localStorage

 const username = Cookies.get("username")

 修改成

 const username = localStorage.getItem("username")

找到路径 src/utils/auth 页面的所有cookies修改成  localStorage

export function getToken() {
  return localStorage.getItem(TokenKey)
}

如果发现跳转到该页面没有调接口，也要把该页面cookie修改成localStorage

找到路径 src/router/index页面的 将history修改成 hash

    export default new Router({
      mode: 'hash', // 去掉url中的#
      scrollBehavior: () => ({ y: 0 }),
      routes: constantRoutes
    })

📝7.修改打包名称为中文

在package.json文件 增加"productName": "你的中文名称",

📝8.打包后退出登录页面白屏

找到退出登录页面 src/layout/components/Navbar文件

找到退出事件 

 async logout() {
  this.$confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    this.$store.dispatch('LogOut').then(() => {
     // location.href = '/index';    

          换成 

        this.$router.push('/login')
     

    })
  }).catch(() => {});
}

}

📝9.只能打开一个exe文件（在background.js 增加下面这段代码，将app关闭的事件也放在里面）

let myWindow = null
const additionalData = { myKey: 'myValue' }


const gotTheLock = app.requestSingleInstanceLock(additionalData)

  if (!gotTheLock) {

    app.quit()
        
  } else {

app.on('second-instance', (event, commandLine, workingDirectory, additionalData) => {

  // 输出从第二个实例中接收到的数据

  console.log(additionalData)

  // 有人试图运行第二个实例，我们应该关注我们的窗口
  if (myWindow) {
    if (myWindow.isMinimized()) myWindow.restore()
    myWindow.focus()
  }
})
 app.on('window-all-closed', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })

}

gitee地址：electron和若依: electron和若依集成成exe文件