Vue前端开发前端

Electron+Vue 开发桌面应用环境搭建(简易)

2021-01-15  本文已影响0人  Cosecant

这里简单做个记录,方便以后使用时查阅!

  1. 安装NodeJS环境及Vue等不再阐述;

  2. 创建一个Electron项目
    2.1. 命令行:

     vue add electron-builder
    

    执行完成后,会生成一个项目目录,大致结构如下图所示:


    目录结构图

    2.2.vue.config.js 配置内容如下:

    module.exports = {
      runtimeCompiler: true, //保证运行时不报错,正常显示界面
      pluginOptions: { //添加成功后,保证electron中remote对象正常使用
        electronBuilder: {
            nodeIntegration: true
        }
      }
    }
    

    2.3. backround.js需要做简单的修改,因为代码中检测了浏览器的vue插件的安装和执行,因为需要科学上网,可以注释里面的代码。

    2.4. 配置项目运行(VSCODE-launch.json)

      {
       "version": "0.2.0",
       "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "app",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run-script",
                "electron:serve"
              ]
           }
         ]
      }
    

    2.5. 如果项目中运行失败,或许要在Dev依赖中安装:@vue/cli & @vue/cli-serve

  3. 一些开发中会遇到的问题

    • 读写本地文件的问题
      background.js 编写以下内容
       webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electronbuilder/guide/security.html#node-integration for more info
        nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
        enableRemoteModule: true,
        webSecurity: false //允许跨域访问,添加该内容
      }
      
      添加文件协议头,这里使用了 file
      app.whenReady().then(()=>{
      protocol.interceptFileProtocol('file', (req, callback) => {
        const url = req.url.substr(8)
        callback(decodeURI(url))
      }, (error) => {
      if (error) {
         console.error('Failed to register protocol');
       }
      });
      })
      
上一篇下一篇

猜你喜欢

热点阅读