vue引用electron_【Electron】开发中的一些问题

        近日在开发一个本地音乐播放器(或许日后会加个某易云)，技术栈是Vue+vue-cli-plugin-electron-builder 。开发过程中也遇到了一些问题，现在拿出来跟大家分享一下。

01

—

在Vue页面中正常引用Electron方法

其实之前没有这个问题的，这次出现了。经过我的测试以及多方查找，最终在Github找了解决办法，原因是nodeIntegration需要开启，以提供完整的node支持，当然这里又涉及安全性的问题。找到vue.config.js，写入：

module.exports = {    pluginOptions: {      electronBuilder: {        nodeIntegration: true      }    }  }

02

—

关于浮动和定位的问题

我们有时可能会同时使用float和position，这里要分几种情况。我们知道CSS有四种定位：position: absolute/relative/fixed/static，其中absolute和fixed是脱离普通文档流的。我们的float:right/left也是脱离普通文档流的。

当我们已经使用position:absolute/fixed时，元素已脱离文档流，再对元素应用float失效。我们应用position:absolute/fixed时候，由于元素已不占据空间，如果需要确定元素位置，可以使用top/bottom/left/right。

如果使用float来确定位置，此时元素占据空间，我们可以使用margin/padding。

另外，个人很推荐使用flex布局，因为比较方便。

03

—

读取本地音频

我们知道，chrome无法直接加载本地资源，所以读取音频文件的是时候会出现Not allowed to load local resource，然后我们可能会想到将主进程里面的

webSecurity设置为false，但是这样会出现新的问题：Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME，所以最好且最安全的方法是创建一个自定义协议，然后使用该协议来加载文件。我们找到app.on('ready', async () => {}，然后进行修改：

const protocolName = 'ngsf' //自定义协议名  protocol.registerFileProtocol(protocolName, (request, callback) => {    const url = request.url.replace(`${protocolName}://`, '')    try {      return callback(decodeURIComponent(url))    }    catch (error) {      console.error(error)    }  })

一番操作时候，就可以正常加载本地资源了

04

—

其实还踩了很多坑，咱们下回分解(￣▽￣)"