electron-vue打包好之后打开非常慢

Question

请问electron-vue，我有引入了element组件库，打包好exe之后打开加载非常慢是什么原因呀，有什么好的解决方法吗？

Answer 1

【相关推荐】

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7601192
• 你也可以参考下这篇文章：使用electron将vue项目打包成exe
• 除此之外, 这篇博客: vue3 electron 记录中的 五、打包.exe 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  项目安装electeon

  npm install electron
  

  项目打包 npm run build
  在打包完成后的dist文件夹内新建main.js和package.js文件
  main.js

  
  const { app, BrowserWindow } = require('electron');//引入electron
  
  // 获取可执行文件位置
  --开机自动启动
  const ex = process.execPath;
  app.setLoginItemSettings({
    openAtLogin: true,
    path: ex,
    args: []
  });
  
  
  
  
  
  function createWindow() {
    win = new BrowserWindow({ show: false })
    win.on('ready-to-show', function () {
      win.show()
      win.maximize()
      // 初始化后再显示
    })
    if (process.env.WEBPACK_DEV_SERVER_URL) {// dev环境
      win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    } else {// 打包环境
      // createProtocol('app')
      win.loadURL(`file://${__dirname}/index.html`);
    }
    // win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html
    // win.webContents.openDevTools();  //开启调试工具
    win.on('close', () => {
      //回收BrowserWindow对象
      win = null;
    });
    去除缩放页面重新加载
    // win.on('resize', () => {
    //   // win.reload();
    // })
  }
  //托盘
  
  app.on('ready', createWindow);
  app.on('window-all-closed', () => {
    app.quit();
  });
  app.on('activate', () => {
    if (win == null) {
      createWindow();
    }
  
  });
  
  

  package.js

  {
      "name": "yi-feng-video",
      "productName": "视频预警",用户看到的名称
      "author": "xxx",
      "version": "1.8.14",--版本号
      "main": "main.js",
      "description": "xx科技视频预警软件",
      "scripts": {
          "pack": "electron-builder --dir",
          "dist": "electron-builder",
          "postinstall": "electron-builder install-app-deps"
      },
      "build": {
          "electronVersion": "1.8.5",
          "win": {
              "target": [
                  {
                      "target": "nsis",
                      "arch": [
                          "x64"
                      ]
                  }
              ],
              "icon": "./yf_video.ico"--可以使用破解版的icofx制作winico,放在dist目录下
          },
          "appId": "YF-video",
          "artifactName": "xx科技-视频预警-${version}-${arch}.${ext}",
          "nsis": {
              "artifactName": "xx科技-视频预警-${version}-${arch}.${ext}"
          },
          "extraResources": [
              {
                  "from": "./static/xxxx/",
                  "to": "app-server",
                  "filter": [
                      "**/*"
                  ]
              }
          ],
          "publish": [
              {
                  "provider": "generic",
                  "url": "http://xxxxx/download/"
              }
          ]
      },
      "dependencies": {
          "core-js": "^2.4.1",
          "electron-packager": "^12.1.0",
          "electron-updater": "^4.0.0"
      },
      "devDependencies": {
          "electron-builder": "^22.11.7"
      }
  }
  
  

  然后cd dist

  npm install electron-builder --save-dev
  

  安装完成之后直接在dist里执行

  npm run dist
  

  再在项目文件夹中找到dist里面的dist里面的.exe文件,这个就是我们需要的文件,直接双击,发送给别人也只需要发送此.exe文件
  至此,打包已完成

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^