Electron打包Vue踩坑记录

masterwater

已于 2022-11-14 22:57:52 修改

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： vue.js electron javascript

于 2022-11-14 21:52:37 首次发布

本文链接：https://blog.csdn.net/masterwater/article/details/127856399

版权

前端专栏收录该内容

2 篇文章

订阅专栏

electron打包vue项目的方法步骤_vue.js_脚本之家 (jb51.net)

一招解决Electron vue-cli3.0+首次启动慢无法加载 vue-devtool 插件_小森森的技术博客_51CTO博客

NPM 代理问题 - 简书 (jianshu.com)

1. 在项目根目录运行

vue add electron-builder

2. 下载后尝试运行窗体（未打包）

npm run electron:serve

3. 运行打包命令

npm run electron:build

问题都在这一步

（1）打包时由于会在github下载包，国内网络一般会失败，需要手动下载nsis与winCodeSign，将 nsis与winCodeSign复制(替换)到以下目录：

（2）

首次启动可能会等待很久，出现以下信息：

INFO Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times

简单的解决方法：直接断网

这是因为在请求安装 vuejs devtools 插件。需要和谐上网才能安装成功。如果不能和谐上网也没关系，直接断网，断网后会快速跳过该步骤，等building完成后恢复联网即可。

（3）proxyconnect tcp: dial tcp :0: connectex: The requested address is not valid in its context.

运行

npm config delete proxy
npm config delete https-proxy

4. 配置跨域

在项目根目录下的src目录里会生成一个background.js，里面是electron的配置，设置WebSecurity为false

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
	  webSecurity: false //这里改为false，没有就添加一行
    },
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
  }
}

5. 不要使用cookie，换成sessionStroage或localStorage