第Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解showOpenDialog是打開(kāi)文件的方法，我們這里指定了只打開(kāi)md文件；

獲得文件路徑后，通過(guò)focusedWindow.webContents.send("open-file-path",filePath);這個(gè)方法將文件路徑傳給渲染線程。

渲染線程取到文件路徑，讀取文件內(nèi)容，賦值給markdown編輯器

!--App.vue--

import{ipcRenderer}from"electron";

import{readFileSync}from"fs";

exportdefaultdefineComponent({

//省略...

setup(){

constcontent=ref("");

onMounted(()={

//1.

ipcRenderer.on("open-file-path",(e,filePath:string)={

if(filePathfilePath.length0){

//2.

content.value=readFileSync(filePath).toString();

return{content};

vue添加node支持

!--vue.config.js--

module.exports={

pluginOptions:{

electronBuilder:{

nodeIntegration:true,

效果

markdonw的內(nèi)容存入文件

主線程發(fā)起向渲染線程獲取編輯器內(nèi)容的請(qǐng)求

!--background.js--

if(focusedWindow){

focusedWindow.webContents.send("get-content","");

渲染線程主線程向返回編輯器的內(nèi)容

!--App.vue--

onMounted(()={

ipcRenderer.on("get-content",()={

ipcRenderer.send("save-content",content.value);

主線程收到內(nèi)容然后存入文件

!--background.ts--

//存儲(chǔ)文件

ipcMain.on("save-content",(event:unknown,content:string)={

if(openedFile.length0){

//直接存儲(chǔ)到文件中去

try{

writeFileSync(openedFile,content);

console.log("保存成功");

}catch(error){

console.log("保存失敗");

}else{

constoptions={

title:"保存文件",

defaultPath:"new.md",

filters:[{name:"CustomFileType",extensions:["md"]}],

constfocusedWindow=BrowserWindow.getFocusedWindow();

if(focusedWindow){

dialog

.showSaveDialog(focusedWindow,options)

.then((result:Electron.SaveDialogReturnValue)={

if(result.filePath){

try{

writeFileSync(result.filePath,content);

console.log("保存成功");

openedFile=result.filePath;

}catch(error){

console.log("保存失敗");

.catch((error)={

console.log(error);

效果

打包

設(shè)置應(yīng)用的名字和圖片

!--vue.config.js--

module.exports={

pluginOptions:{

electronBuilder:{

nodeIntegration:true,

//添加的設(shè)置

builderOptions:{

appId:"com.johnny.markdown",

productName:"JJMarkDown",//應(yīng)用的名字

copyright:"Copyright2025",//版權(quán)聲明

mac:{

icon:"./public/icon.icns",//icon

icon.icns生成準(zhǔn)備一個(gè)1024*1024的圖片，同級(jí)目錄下創(chuàng)建一個(gè)為icons.iconset的文件夾；

創(chuàng)建各種不同尺寸要求的圖片文件

sips-z1616icon.png-oicons.iconset/icon_16x16.png

sips-z3232icon.png-oicons.iconset/icon_16x16@2x.png

sips-z3232icon.png-oicons.iconset/icon_32x32.png

sips-z6464icon.png-oicons.iconset/icon_32x32@2x.png

sips-z128128icon.png-oicons.iconset/icon_128x128.png

sips-z256256icon.png-oicons.iconset/icon_128x128@2x.png

sips-z256256icon.png-oicons.iconset/icon_256x256.png

sips-z512512icon.png-oicons.iconset/icon_256x256@2x.png

sips-z512512icon.png-oicons.iconset/icon_512x512.png

sips-z10241024icon.png-oicons.iconset/icon_512x512@2x.png

獲得名為icon.icns的圖標(biāo)文件

iconutil-cicnsicons.iconset-oicon.icns

打包

npmrunelectron:build

結(jié)果

獲得的dmg文件就可以直接安裝使用了。

代碼

!--background.ts--

"usestrict";

import{

app,

protocol,

BrowserWindow,

screen,

Menu,

MenuItem,

shell,

dialog,

ipcMain,

}from"electron";

import{KeyboardEvent,MenuItemConstructorOptions}from"electron/main";

import{createProtocol}from"vue-cli-plugin-electron-builder/lib";

importinstallExtension,{VUEJS3_DEVTOOLS}from"electron-devtools-installer";

constisDevelopment=process.env.NODE_ENV!=="production";

import{writeFileSync}from"fs";

letopenedFile="";

//存儲(chǔ)文件

ipcMain.on("save-content",(event:unknown,content:string)={

if(openedFile.length0){

//直接存儲(chǔ)到文件中去

try{

writeFileSync(openedFile,content);

console.log("保存成功");

}catch(error){

console.log("保存失敗");

}else{

constoptions={

title:"保存文件",

defaultPath:"new.md",

filters:[{name:"CustomFileType",extensions:["md"]}],

constfocusedWindow=BrowserWindow.getFocusedWindow();

if(focusedWindow){

dialog

.showSaveDialog(focusedWindow,options)

.then((result:Electron.SaveDialogReturnValue)={

if(result.filePath){

try{

writeFileSync(result.filePath,content);

console.log("保存成功");

openedFile=result.filePath;

}catch(error){

console.log("保存失敗");

.catch((error)={

console.log(error);

consttemplate:ArrayMenuItemConstructorOptions=[

label:"MarkDown",

submenu:[

label:"關(guān)于",

accelerator:"CmdOrCtrl+W",

role:"about",

label:"退出程序",

accelerator:"CmdOrCtrl+Q",

role:"quit",

label:"文件",

submenu:[

label:"打開(kāi)文件",

accelerator:"CmdOrCtrl+O",

click:(

item:MenuItem,

focusedWindow:BrowserWindow|undefined,

//eslint-disable-next-line@typescript-eslint/no-unused-vars

_event:KeyboardEvent

)={

dialog

.showOpenDialog({

properties:["openFile"],

filters:[{name:"CustomFileType",extensions:["md"]}],

.then((res)={

if(resres["filePaths"].length0){

constfilePath=res["filePaths"][0];

//將文件傳給渲染線程

if(focusedWindow){

focusedWindow.webContents.send("open-file-path",filePath);

openedFile=filePath;

.catch((err)={

console.log(err);

label:"存儲(chǔ)",

accelerator:"CmdOrCtrl+S",

click:(

item:MenuItem,

focusedWindow:BrowserWindow|undefined,

//eslint-disable-next-line@typescript-eslint/no-unused-vars

_event:KeyboardEvent

)={

if(focusedWindow){

focusedWindow.webContents.send("get-content","");

label:"編輯",

submenu:[

label:"撤銷",

accelerator:"CmdOrCtrl+Z",

role:"undo",

label:"重做",

accelerator:"Shift+CmdOrCtrl+Z",

role:"redo",

type:"separator",

label:"剪切",

accelerator:"CmdOrCtrl+X",

role:"cut",

label:"復(fù)制",

accelerator:"CmdOrCtrl+C",

role:"copy",

label:"粘貼",

accelerator:"CmdOrCtrl+V",

role:"paste",

label:"窗口",

role:"window",

submenu:[

label:"最小化",

accelerator:"CmdOrCtrl+M",

role:"minimize",

label:"最大化",

accelerator:"CmdOrCtrl+M",

click:(

item:MenuItem,

focusedWindow:BrowserWindow|undefined,

//eslint-disable-next-line@typescript-eslint/no-unused-vars

_event:KeyboardEvent

)={

if(focusedWindow){

focusedWindow.maximize();

type:"separator",

label:"切換全屏",

accelerator:(function(){

if(process.platform==="darwin"){

return"Ctrl+Command+F";

}else{

return"F11";

})(),

click:(

item:MenuItem,

focusedWindow:BrowserWindow|undefined,

//eslint-disable-next-line@typescript-eslint/no-unused-vars

_event:KeyboardEvent

)={

if(focusedWindow){

focusedWindow.setFullScreen(!focusedWindow.isFullScreen());

label:"幫助",

role:"help",

submenu:[

label:"學(xué)習(xí)更多",

click:function(){

shell.openExternal("http://electron.atom.io");

protocol.registerSchemesAsPrivileged([

{scheme:"app",privileges:{secure:true,standard:true}},

asyncfunctioncreateWindow(){

const{width,height}=screen.getPrimaryDisplay().workAreaSize;

constwin=newBrowserWindow({

width,

height,

webPreferences:{

nodeIntegration:true,

contextIsolation:false,

if(process.env.WEBPACK_DEV_SERVER_URL){

//Loadtheurlofthedevserverifindevelopmentmode

awaitwin.loadURL(process.env.WEBPACK_DEV_SERVER_URLasstring);

if(!process.env.IS_TEST)win.webContents.openDevTools();

}else{

createProtocol("app");

//Loadtheindex.htmlwhennotindevelopment

win.loadURL("app://./index.html");

//Quitwhenallwindowsareclosed.

app.on("window-all-closed",()={

//OnmacOSitiscommonforapplicationsandtheirmenubar

//tostayactiveuntiltheuserquitsexplicitlywithCmd+Q

if(process.platform!=="darwin"){

app.quit();

app.on("activate",()={

//OnmacOSit'scommontore-createawindowintheappwhenthe

//dockiconisclic