在使用electron结合vue的时候(并没有用官方的elect

2017-11-03  本文已影响1527人  一沭丶

在使用electron结合vue的时候(并没有用官方的electron-vue)

为了区分webpack的require和node的require,查询资料我进行了如下操作
在入口的index.html页面中添加如下js

    <script>
          global.elRequire = require;

          const electron = require('electron');
          const ipcRenderer = electron.ipcRenderer;
          const remote = electron.remote;
          const shell = electron.shell;

          const path = require('path');
          const os = require('os');
          const childProcess = require('child_process');
          const fs = require('fs');
          const rc = require('rc');

          global.electron = electron;
          global.remote = remote;
          global.ipcRenderer = ipcRenderer;
          global.shell = shell;
          global.path = path;
          global.os = os;
          global.childProcess = childProcess;
          global.fs = fs;
          global.rc = rc;
          
          global.rootName = process.cwd();
    </script>

main.js中

Vue.use({
  install (Vue, options) {
      Vue.prototype.$elRequire = global.elRequire;
      Vue.prototype.$childProcess = global.childProcess;
      Vue.prototype.$fs = global.fs;
      Vue.prototype.$rc = global.rc;
      
      Vue.prototype.$shell = global.shell;
      
      Vue.prototype.$electron = global.electron;
      Vue.prototype.$path = global.path;
      Vue.prototype.$ipc = global.ipcRenderer || {};
      Vue.prototype.$remote = window.remote;
  }
});

使用

    const dialog = this.$remote.dialog;
    
    dialog.showOpenDialog({
        filters: [
            {name: 'e-config', extensions: ['json']}
        ]
    }, (path)=> {
        try {
            this.console  = path;
            this.folderPath = this.$path.parse(path[0]).dir;

            let config = this.$fs.readFileSync(path[0], "utf-8");

            config = JSON.parse(config);

            this.config = config || {};
        } catch(e) {
            console.log('没有选择');
        }
        
    });

在调试状态开发的时候这一切都没有问题

但是在打包后,这些都失...效...了....

经过半天的排查,发现只有可能是electron的remote模块并没有引用到。

所以后来就改为在组件中进行引用

    const $electron  = global.elRequire('electron');
    const $remote = $electron.remote;
    const $path = global.elRequire('path');
    const $fs = global.elRequire('fs');
        
    //todo
    //直接使用 $remote.dialog.showOpenDialog()

这个问题解决了

上一篇下一篇

猜你喜欢

热点阅读