vue项目打包成桌面快捷方式(electron)的方法

要将Vue项目打包成桌面快捷方式，我们可以使用Electron框架。 这里是一个简单的教程，演示如何使用Electron，将一个Vue应用程序打包成可执行文件并创建桌面快捷方式的命令。

步骤一：创建Vue应用程序

首先我们需要创建Vue应用程序。 如果您已经有一个Vue应用程序，请学习第二步。您可以使用Vue CLI或手动创建Vue应用程序。

示例1： 使用Vue CLI创建Vue应用程序

# 安装Vue CLI
npm install -g @vue/cli

# 创建Vue项目
vue create my-vue-app

示例2： 手动创建Vue应用程序

您可以手动创建Vue应用程序，方法是：

1. 创建一个新的文件夹
2. 然后在该文件夹中执行以下命令：

# 初始化 npm 仓库
npm init

# 安装 Vue，Vue Router 和 Vue CLI
npm install --save vue vue-router
npm install --save-dev vue-cli

然后，创建一个index.html文件和一个index.js文件。

步骤二：安装Electron

运行以下命令来安装Electron：

npm install --save-dev electron

步骤三：创建Electron主进程文件

创建一个名为main.js的新文件，并从electron模块导入app和BrowserWindow。以下是一个最小化的main.js文件的示例：

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

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

  win.loadURL('http://localhost:8080') // 这里使用Vue项目运行的地址

  // 在窗口关闭时执行以下代码
  win.on('closed', () => {
    // 解除窗口对象的引用，如果您的应用支持多窗口，
    // 通常会将窗口储存到一组数组中，这是您应该删除相应元素的时间。
    win = null
  })
}

// Electron app模块准备好后将调用此方法
// 有些API只能在这个事件发生后才能使用
app.on('ready', createWindow)

// 所有窗口关闭时退出应用程序
app.on('window-all-closed', () => {
  // 在 macOS 上，还必须应用程序及其菜单栏在用户
  // 用 Cmd + Q 显式退出。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在 macOS 上，通常在单击 dock 图标且没有其他窗口打开时，
  // 在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow()
  }
})

步骤四：启动Vue应用程序

在.vue项目中找到package.json文件，在其中添加以下代码：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "start": "electron ."
},

步骤五：打包成可执行文件

在你完成了前面的四个步骤后, 可以使用以下命令来执行打包:

npm run build # 打包Vue项目
npm start # 启动Electron

使用桌面应用程序打包工具（如electron-builder或electron-packager）对Vue应用程序进行打包。

示例 1： electron-builder

npm install --save-dev electron-builder

# 在 package.json 文件中添加以下内容
"build": {
  "appId": "com.example.myvueapp",
  "productName": "MyVueApp",
  "linux": {
    "target": "deb"
  },
  "mac": {
    "target": "dmg"
  },
  "win": {
    "target": [
      { "target": "nsis", "arch": ["x64"] }
    ]
  }
}

然后可以运行以下命令来构建应用程序（构建会在build文件夹中创建结果）：

npm run build
npx electron-builder build

示例 2：electron-packager

npm install electron-packager --save-dev

然后，使用以下命令将Vue应用程序打包为可执行文件：

electron-packager . MyVueApp --all

其中，. 代表路径， MyVueApp 是生成的应用程序的名称。

完成上述步骤后，将根据您的系统生成相应的应用程序，您可以在此之后创建软链接，请参阅资料以了解详细信息。