美文网首页
在使用electron结合vue的时候(并没有用官方的elect

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

作者: 一沭丶 | 来源:发表于2017-11-03 17:02 被阅读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()
    

    这个问题解决了

    相关文章

      网友评论

          本文标题:在使用electron结合vue的时候(并没有用官方的elect

          本文链接:https://www.haomeiwen.com/subject/duntmxtx.html