使用electron将vue-cli项目打包成exe的方法

下面是使用electron将vue-cli项目打包成exe的详细攻略：

1. 准备工作

在开始之前，你需要确保你的电脑已经安装了以下软件：

Node.js
npm包管理器
Vue CLI
Git

其中，Node.js建议选择LTS版本，npm建议升级至最新版本。

2. 创建Vue项目

接下来，我们来创建一个Vue项目。在命令行中输入以下命令：

vue create my-electron-project

这条命令将会使用Vue CLI创建一个新的Vue项目。在项目创建完成后，你可以通过以下命令运行项目：

cd my-electron-project
npm run serve

这样可以在本地启动一个开发服务器，在浏览器中访问 http://localhost:8080 可以查看项目运行效果。

3. 集成electron

接下来，我们需要使用electron将Vue项目打包成.exe可执行文件。首先，我们来安装electron：

npm install electron --save-dev

安装完成后，在项目根目录下创建main.js文件，输入以下内容：

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

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // 加载项目入口文件
  mainWindow.loadURL('http://localhost:8080');

  // 打开开发者工具
  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow();
  }
});

这个文件是electron的主进程，它将加载我们在第二步创建的Vue项目，并创建一个窗口来展示它。通过以上代码，electron会在加载时打开Chrome DevTools，你可以在其中进行调试。

4. 打包应用

现在，我们已经成功将Vue项目和electron集成到了一起。接下来，我们需要使用electron-builder将项目打包成一个可执行文件。

首先安装electron-builder:

sudo npm install electron-builder --save-dev

安装完成后，我们需要在项目根目录下创建build目录，在其中创建electron-builder.json文件，输入以下内容：

{
    "directories": {
        "output": "dist_electron"
    },
    "mac": {
        "target": "dmg"
    },
    "win": {
        "target": "nsis"
    },
    "nsis": {
         "oneClick": true,
         "perMachine": true,
         "allowElevation": true,
         "allowToChangeInstallationDirectory": true,
         "installerIcon": "build/icon.ico",
         "uninstallerIcon": "build/icon.ico",
         "installerHeaderIcon": "build/icon.ico",
         "createDesktopShortcut": true,
         "createStartMenuShortcut": true,
         "shortcutName": "My App"
    }
}

上面的配置文件意味着我们将把打包较后的文件输出到一个叫做dist_electron的目录中，同时，在Windows系统中，打包出来的文件格式为NSIS。具体你可以自行选择。

最后，在命令行中输入以下命令，开始打包应用：

npm run electron:build

这个命令运行后，等待一段时间会生成一个可执行文件，并产生一个安装程序。你会发现打包后，根目录多出了一个dist_electron目录，里面有生成的可执行文件。

5. 部署应用

现在，我们需要部署我们的应用。首先，我们需要将生成的可执行文件进行测试，确保它能够正常运行。然后，我们需要把这个可执行文件部署到其它电脑上。

将安装程序或者可执行文件复制到目标电脑上，并运行它。你会发现这个程序可以直接运行，不需要任何依赖。

示例

这里提供两个示例：

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用electron将vue-cli项目打包成exe的方法 - Python技术站