解決vue3前端獲取文件的絕對路徑問題

公司的項目是基于vue3的，由于需求需要前端獲取用戶選的文件的絕對路徑。但是瀏覽器處于安全策略無法獲取真實的文件路徑，只能拿到相對路徑或者是D:\fakepath\xxxx.
看了網上很多方法都很坑，明明沒拿到路徑非說拿到了，浪費了很多時間，這里要說單純依靠vue是解決不了的！！
最后選擇了引入electron來獲取文件的絕對路徑。項目已經使用electron進行了打包，所以是可以通過electron方式運行的，現在需要的就是vue的代碼中引入electron，進行打開文件管理器，實現文件路徑獲取。
首先要安裝相關的包：

npm install --save-dev electron
npm install --save-dev electron-builder

所有的界面代碼都是在vue項目中完成的所以vue中不再需要preload.js background.js這些文件
electron的通信是通過ipcRenderer實現的
在需要通信的文件中進行調用

const { ipcRenderer } = require('electron')

這時候會報錯，錯誤顯示是node_modules/electron/index.js文件中引入fs.existsSync語句造成的
百度查資料得知原因是：
(1)、首先在渲染進程屬于瀏覽器端，沒有集成Node的環境，所以類似 fs 這樣的Node的基礎包是不可以使用。
(2)、因為沒有Node環境，所以這種屬于node api的require關鍵詞是不可以使用的。
(3)、electron5.x的node集成環境默認是關閉的，這之前的版本是默認開啟的
方案是在主進程中集成 Nodejs，也就是添加配置nodeIntegration: true
vue.config.js配置：

 pluginOptions: {electronBuilder: {nodeIntegration: true,contextIsolation: false,}}

然后通過使用window.require代替require來引入electron，因為前者不會被webpack編譯，在渲染進程require關鍵字就是表示node模塊的系統渲染進程：

const { ipcRenderer } = window.require('electron')

這時候又出現 window.require is not a function .錯誤，這是因為工程是在本地瀏覽器運行的，識別不了electron中的api,只要保證在electron應用程序下運行就不會報錯
解決：npm install --save is-electron

 function importStudy() {if (isElectron()) {window.ipcRenderer = window.require('electron').ipcRendereripcRenderer.send('upload', "import study")ipcRenderer.on('get-file-path', (event: any, arg: any) => {console.log(arg)})})}          }

vue文件：

 <button @click="importStudy">import</button>

點擊頁面的按鈕就會向upload發送消息去進行打開文件管理的操作
在electron的包中main.js進行接收

ipcMain.on('upload',(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)//拿到路徑后返回}}).catch(err=>{console.log(err)});})

此時importStudy可以拿到絕對路徑了，但是前端瀏覽器沒辦法調試，后端是可以獲取到的。