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开发门户网站