在使用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()
这个问题解决了