Vue項目打包為exe可安裝程序操作步驟

更新時間：2023年12月13日 09:31:31 作者：陽光總在風(fēng)雨后丶

這篇文章主要給大家介紹了關(guān)于Vue項目打包為exe可安裝程序操作步驟的相關(guān)資料,Vue是一種流行的JavaScript框架,用于構(gòu)建單頁面應(yīng)用程序(SPA),需要的朋友可以參考下

前言

使用 Electron 和 Inno Setup 將 vue項目打包為 exe 可安裝程序

1 )、Electron 下載安裝方式

官網(wǎng)地址
git倉庫下載地址

git clone https://github.com/electron/electron-quick-start 
cd electron-quick-start
npm install
npm start

運(yùn)行成功后界面

2 ) 、 Inno Setup 下載安裝方式

無腦下一步即可

官網(wǎng)地址
各大應(yīng)用商城下載（如：電腦管家、360等）

操作步驟

一、修改需要打包為 exe 項目的 vite.config.js 或 vue.config.js 配置文件

//	vite.config.js
export default defineConfig({
  base: "./",
})

       或

//	vue.config.js
module.exports = {   
	publicPath: "./",   
}

路徑必須修改為 "./" ，不然可能造成頁面空白或加載失敗的情況

二、在不熟悉 Electron 在 Vue 項目中配置的情況下建議在 electron-quick-start （官方demo，前言中clone 的項目）中安裝打包需要的依賴。（在原vue項目中的操作可自行百度）

npm install electron-packager --save-dev

三、刪除 electron-quick-start 根目錄下的 index.html 文件四、在 electron-quick-start 項目中找到 main.js 文件修改其配置

更多配置請移步 Electron官網(wǎng) 查看
mainWindow.loadFile('./dist/index.html') 為vue項目打包后的 index.html 所在地址，指向必須正確否則無法正確展示頁面?。?！

代碼如下：

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    },
	
	resizable: true,	//是否支持調(diào)整窗口大小
	backgroundColor: '#000000', //窗口背景色
	icon: './dist/favicon.ico'	//	左上角圖標(biāo)
	//	width: 800,		//	指定窗口寬度
    //	height: 600,    //	指定窗口高度
	//	frame: true		//	無邊框窗口	去掉頂部導(dǎo)航 去掉關(guān)閉按鈕 最大化最小化按鈕
  })

  // 	and load the index.html of the app.
  //	mainWindow.loadFile('index.html')	//	原始內(nèi)容
  mainWindow.loadFile('./dist/index.html') //	修改后的內(nèi)容
  
  mainWindow.setMenu(null)			//	隱藏頂部菜單
  mainWindow.webContents.openDevTools()	//	打開調(diào)試模式
  
  //	默認(rèn)窗口最大化
  mainWindow.maximize()
  mainWindow.show()
  
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

五、在 electron-quick-start 項目 package.json 配置文件中，scripts 下添加 packager 指令

"scripts": {
   "start": "electron .",
   "packager": "electron-packager ./ App --platform=win32 --arch=x64 --electron-version=19.0.6 --icon=logo.ico --overwrite"
}

--icon=logo.ico 為打包后 exe 文件的圖標(biāo)，logo.ico 是 .ico 文件地址與 node_modules 平級可忽略路徑，否則需要表明路徑如：（./dist/logo.ico）

可能遇到的坑：