形成された vue3 プロジェクトは電子通信を導入します
1.
cnpm i electric --save-dev で Electron をインストールした後、electron で ipcRenderer モジュールを使用する必要があります。呼び出し時に、electron を導入するために require を使用すると、エラーが報告されます。fs.existsSync は関数ではない、または Uncaught ReferenceError: require 「定義されていません」エラー
。この表示は、node_modules/electron/index.js ファイル内の fs.existsSync ステートメントの導入によって発生します。
const {
ipcRenderer } = require('electron')
情報を確認したところ、
レンダリングプロセスはブラウザ側に属し、統合されたNode環境がないため、fsなどのNodeの基本パッケージが使用できないことがわかりました。
Node環境がないため、Node APIに属するrequireキーワードは使用できません。
Electron は、require の代わりに window.require を使用して導入されます。これは、前者は webpack によってコンパイルされず、レンダリング プロセスの require キーワードがノード モジュールのシステムを表すためです。
vue端:js
var renderer = window.require('electron').ipcRenderer
renderer.send('import-study', "begin to import study")
電子側:
ipcMain.on('import-study',(event,message)=>{
console.log(message)
dialog.showOpenDialog({
title:'选择要上传的文件',//对话框的标题
buttonLabel: '确认', //确定按钮的自定义标签
properties: [ 'openDirectory', 'multiSelections'], //打开文件的属性,打开文件还是文件夹,隐藏文件,多选文件
}).then(res=>{
if(!res.canceled){
console.log(res.filePaths)
event.reply('get-file-path',res.filePaths[0])
}
}).catch(err=>{
console.log(err)
});
})
vue は電子を受け取り、以下を返します。
renderer.on('get-file-path', (event: any, arg: string) => {
console.log(arg)
})