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

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

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');
      }
     });
     })