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

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

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

   npm install -g @vue/cli  //安装vue3
   vue create ProjectName  //创建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');
      }
     });
     })
     

4. 应用打包配置及安装包生成(使用vue-cli-electron-builder)
   需要先配置文件Vue.config.js，如下：

   module.exports = {
   runtimeCompiler: true, //保证运行时不报错，正常显示界面
   pluginOptions: { //添加成功后，保证electron中remote对象正常使用
     // 打包项数据配置
     electronBuilder: {
         nodeIntegration: true,
         builderOptions: {
           "appId": "com.xxx",
           "productName":"coc",//项目名，也是生成的安装文件名，即aDemo.exe
           "copyright":"Copyright © 2021",//版权信息
           "directories":{
               "output":"./out"//输出文件路径
           },
           "win":{//win相关配置
               // "icon":"./coc.ico",//图标，当前图标在根目录下，注意这里有两个坑, 文件要求256x256，不设置则使用默认图标
               "target": [
                   {
                       "target": "nsis",//利用nsis制作安装程序
                       "arch": [
                           "x64",//64位
                           // "ia32"//32位
                       ]
                   }
               ]
           }
       }
      }
    }
   }
   

   配置完成后，执行一下命令打包

    npm run electron:build