Vue.js是一種流行的JavaScript框架，用于構建用戶界面。它提供了一套簡潔、靈活和高效的工具，使開發人員能夠快速構建現代化的Web應用程序。由于Vue.js是基于JavaScript的，它的代碼是運行在瀏覽器中的，這就意味著用戶必須通過瀏覽器來訪問和運行Vue.js應用程序。

有時候我們可能希望將Vue.js應用程序打包成可執行文件（exe），以便用戶可以在沒有瀏覽器的情況下運行應用程序。這在某些特定的應用場景中非常有用，比如創建桌面應用程序或將應用程序分發給沒有技術背景的用戶。

要將Vue.js應用程序打包成可執行文件，我們可以使用Electron。Electron是一個開源的框架，它允許開發人員使用Web技術（HTML、CSS和JavaScript）構建跨平臺的桌面應用程序。它使用Chromium作為瀏覽器內核，使得我們可以將Vue.js應用程序封裝在一個獨立的桌面應用程序中。

下面是將Vue.js應用程序打包成可執行文件的步驟：

1. 安裝Electron：我們需要安裝Electron。可以使用npm（Node.js的包管理器）來安裝Electron，命令如下：

npm install electron --save-dev

2. 創建主進程文件：在Vue.js應用程序的根目錄下，創建一個名為main.js的文件。這個文件將作為Electron的主進程文件，負責啟動應用程序并創建窗口。在main.js中，我們需要引入Electron模塊，并創建一個窗口來加載Vue.js應用程序的入口文件。

`javascript

const { app, BrowserWindow } = require('electron')

function createWindow() {

// 創建瀏覽器窗口

const win = new BrowserWindow({

width: 800,

height: 600,

webPreferences: {

nodeIntegration: true

}

})

// 加載Vue.js應用程序的入口文件

win.loadFile('index.html')

// Electron準備就緒時創建窗口

app.whenReady().then(createWindow)

3. 創建入口文件：在Vue.js應用程序的根目錄下，創建一個名為index.html的文件。這個文件將作為Vue.js應用程序的入口文件，負責加載Vue.js應用程序的代碼和資源。
`html



  
  


  
  

  
  
  
  

4. 打包應用程序：在Vue.js應用程序的根目錄下，創建一個名為package.json的文件。這個文件是用來描述應用程序的配置信息和依賴項的。在package.json中，我們需要添加一個打包命令，用于將應用程序打包成可執行文件。

`json

"name": "vue-app",

"version": "1.0.0",

"main": "main.js",

"scripts": {

"start": "electron .",

"package": "electron-packager . vue-app --platform=win32 --arch=x64 --out=dist --overwrite"

},

"devDependencies": {

"electron": "^12.0.0",

"electron-packager": "^15.2.0"

}

在上面的配置中，我們使用了electron-packager這個工具來打包應用程序。它可以將Electron應用程序打包成各種平臺和架構的可執行文件。在這個例子中，我們將應用程序打包成Windows 64位的可執行文件，并將輸出目錄設置為dist。
5. 執行打包命令：在命令行中，進入Vue.js應用程序的根目錄，并執行打包命令：

npm run package

執行完畢后，應用程序的可執行文件將會生成在dist目錄下。

通過以上步驟，我們就成功地將Vue.js應用程序打包成了可執行文件。用戶可以直接運行這個可執行文件，而無需依賴瀏覽器。這為我們開發和分發Vue.js應用程序提供了更多的可能性。

上一篇

vue打包app.js太大

下一篇

vue開發門戶網站