vue打包exed

Vue.js 是一款流行的前端框架，但是在实际的开发中，我们需要将 Vue.js 项目打包成可执行文件，以便于部署和发布。本文将详细介绍如何使用 Electron 和 Vue.js 将 Vue.js 项目打包成可执行文件。

## Electron

Electron 是一个基于 Chromium 和 Node.js 的框架，用于构建跨平台桌面应用程序。它可以让我们使用 Web 技术来构建桌面应用程序，并且可以使用 Node.js 的功能来访问本地文件系统、操作系统和硬件设备等功能。因此，我们可以使用 Electron 来打包 Vue.js 项目。

## 打包 Vue.js 项目

在使用 Electron 打包 Vue.js 项目之前，我们需要先将 Vue.js 项目打包。Vue.js 项目的打包可以使用 webpack 或者其他打包工具。在这里，我们使用 webpack 来打包 Vue.js 项目。

1. 安装 webpack

```bash

npm install webpack webpack-cli --save-dev

```

2. 创建 webpack 配置文件

在项目根目录下创建 `webpack.config.js` 文件，并添加以下内容：

```javascript

const path = require('path');

module.exports = {

entry: './src/main.js',

output: {

path: path.resolve(__dirname, 'dist'),

filename: 'bundle.js'

},

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader'

},

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

}

]

},

resolve: {

alias: {

'vue$': 'vue/dist/vue.esm.js'

},

extensions: ['*', '.js', '.vue', '.json']

},

devServer: {

contentBase: './dist'

}

};

```

3. 打包 Vue.js 项目

在终端中输入以下命令，即可打包 Vue.js 项目：

```bash

npm run build

```

打包完成后，`dist` 目录下会生成 `bundle.js` 文件。

## 使用 Electron 打包 Vue.js 项目

在打包 Vue.js 项目完成后，我们可以使用 Electron 将其打包成可执行文件。

1. 安装 Electron

```bash

npm install electron --save-dev

```

2. 创建 Electron 入口文件

在项目根目录下创建 `main.js` 文件，并添加以下内容：

```javascript

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

const path = require('path');

function createWindow () {

const win = new BrowserWindow({

width: 800,

height: 600,

webPreferences: {

nodeIntegration: true

}

});

win.loadFile(path.join(__dirname, 'index.html'));

}

app.whenReady().then(() => {

createWindow();

app.on('activate', () => {

if (BrowserWindow.getAllWindows().length === 0) {

createWindow();

}

});

});

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

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

app.quit();

}

});

```

3. 创建 package.json 文件

在项目根目录下创建 `package.json` 文件，并添加以下内容：

```json

{

"name": "my-electron-app",

"version": "1.0.0",

"main": "main.js",

"scripts": {

"start": "electron ."

}

}

```

4. 创建 index.html 文件

在项目根目录下创建 `index.html` 文件，并添加以下内容：

```html