vue项目有没有办法打包成exe单文件，并且可以操作其他文件？

Question

如题，我有个vue项目，有没有办法打包成exe单文件呢？免安装直接运行的那种。
另外就是还要能操作其他文件，比如修改同目录或同目录的某个子目录下的文件内容。
如回答的好可以追加酬金，感谢。

Answer 1

需求
1、有没有办法打包成exe单文件呢？免安装直接运行的那种。
2、另外就是还要能操作其他文件，比如修改同目录或同目录的某个子目录下的文件内容。

答案

解答一

有的，electron可能是个比较好的解决方案。

通过使用 Electron，我们可以创建一个基于网站的桌面应用程序，并在最后添加 Electron 构建器，我们可以创建一个安装程序。这个桌面应用程序基于 Vue.js 应用程序，但它几乎可以是任何应用程序或网站。

先决条件

唯一的先决条件是应该安装https://nodejs.org/

Yarn 升级步骤是使用 Yarn 而不是 npm。如果你还没有安装 Yarn，那么使用下面的 npm 命令安装 Yarn（全局）。

npm install yarn --global

Vue CLI 如果您还没有安装 Vue CLI（全局），请运行以下命令。

yarn add global @vue/cli

创建一个 Vue.js 网站

要创建 Vue.js 网站，我们将使用 Vue CLI。通过使用该vue create命令，Vue.js CLI 会创建一个名为 的 Vue.js 应用程序my-vue-app。该--default选项使用 Vue.js 默认值跳过预设提示。

vue create my-vue-app --default --no-git

现在运行项目，执行以下操作，然后http://localhost:8080/在您喜欢的浏览器中打开地址。

cd my-vue-app
yarn serve

当一切都不好时，会显示 Vue.js 欢迎页面并显示消息Welcome to Your Vue.js App。

创建电子应用程序

下一步是构建基于 Vue.js 应用程序的跨平台桌面应用程序。

yarn add electron使用命令安装电子。我们在本地安装它（--dev）。

yarn add electron --dev

在 Vue.js 项目的根目录中，我们创建一个main.js文件。请记住，此文件是在我们项目的根目录中创建的 ( /my-vue-app/main.js)。该main.js文件是我们应用程序的入口点内容。该main.js文件的内容如下所示。将内容复制/粘贴到main.js文件中。

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

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

  win.loadFile('index.html') // this needs to be changed to './dist/index.html' for the my-vue-app
  win.webContents.openDevTools()
}

app.whenReady().then(createWindow)

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

设置入口点

该win.loadFile('index.html')行指向错误的文件。默认情况下index.html设置为起始页。在为我们的 Vue.js 应用程序运行构建后，我们index.html位于./dist. 这意味着我们需要更改起始页。将线更改为以下以指向正确的位置。

win.loadFile('./dist/index.html')

易于查看的设置是添加 Vue.js 公共路径。此设置取决于您使用的构建环境。vue.config.js在项目的根目录中创建一个文件并设置公共路径。"./"注意和之间的区别"/"。

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/"
}

我们需要修改package.json文件以指向我们的main.js文件。将主 json 元素添加到文件的根package.json目录。

{  "main": "main.js"}

设置开发命令

接下来将electron:dev元素添加到文件中的scripts元素package.json。使用此命令，可以调用 Yarn 来构建我们的 Vue.js 应用程序，然后调用 Electron 命令来构建和运行该应用程序。

{  "scripts": {      "electron:dev": "vue-cli-service build && electron ."  },}

运行开发命令

要测试一切是否正常，请使用electron:devYarn 命令。

Yarn electron:dev

显示电子窗口。可能与开发人员工具openen。默认情况下，可以通过从文件中删除该win.webContents.openDevTools()行来隐藏它。main.js

配置跨平台构建

要为 Windows、Linux 或 MacOS 打包和构建电子应用程序，我们需要一个名为electron-builder. 用 Yarn 安装它。

yarn add electron-builder --dev

打开package.json文件并将以下构建元素添加到文件的根目录。根据您的要求更改值。对于这个例子，我使用appIdmy.vue.app 并构建一个win（windows）可执行目标nsis（Nullsoft Scriptable Install System）。这意味着我将为我们的 my-vue-app 安装一个安装程序。要查看所有选项，请参阅https://www.electron.build/configuration/configuration#configuration。

{  "build": {    "appId": "my.vue.app",    "win": {      "target": "nsis"    }  }}

将 dist 文件夹配置为构建资源

大部分被遗忘的部分花了一些时间让我弄清楚。构建 dist 文件夹时未打包，但 src 文件夹会打包。这是我们不想要的。要解决此问题，请package.json再次打开该元素并使用其他两个元素扩展该build元素，files然后directories. 第一个（文件）告诉构建包含与给定模式匹配的文件。第二个（目录）告诉我们要dist用作构建资源，并且我们希望将所有内容输出到release文件夹。

{
  "build": {
    "files": ["**/*", "dist/**/*"],
    "directories": {
      "buildResources": "dist",
      "output": "release"
    }
  }
}

设置可执行构建命令

要使用build配置，请修改package.json文件并将另一个元素添加到scripts.

{
  "scripts": {
    "electron:build": "vue-cli-service build --mode production && electron-builder build"
  }
}

electron:build现在让我们使用Yarn 命令构建我们的安装程序。

Yarn electron:build

运行应用程序

打开my-vue-app/release文件夹，Windows NSIS 安装程序调用my-vue-app Setup 0.1.0.exe. 您还可以通过打开my-vue-app/release/win-unpacked文件夹并运行my-vue-app.exe.

参考链接：

Ralf de Rijcke | Vue.js as desktop executable Ralf de Rijcke | Vue.js as desktop executable https://www.ralfderijcke.nl/blog/2020-10-20-vue.js-as-desktop-executable/

---

下面来回答第二个问题

解答二

关于vue,并没有找到合适的现成的第三方库的解决方案.
要相对文件进行操作，两个解决方法;
1、使用nodejs直接进行文件操作，
Node.js 提供一组类似 UNIX（POSIX）标准的文件操作API。 Node 导入文件系统模块(fs)语法如下所示：

var fs = require("fs")

通过这个第三方库，
可以实现具体的文件读取，文件修改，文件删除操作，
具体Demo代码可以参考这个
参考：

Node.js 文件系统 | 菜鸟教程 Node.js 文件系统 Node.js 提供一组类似 UNIX（POSIX）标准的文件操作API。 Node 导入文件系统模块(fs)语法如下所示： var fs = require('fs') 异步和同步 Node.js 文件系统（fs 模块）模块中的方法均有异步和同步版本，例如读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync()。 异步的方法函数最后一个参.. https://www.runoob.com/nodejs/nodejs-fs.html

2、跟上一个问题提到的一样，
第二个方法还是调用后端的API
vue通过调用后端的API接口，通过传参，来对指定的文件夹进行指定的操作：修改删除或者其他操作。
后端接收vue传过来的参数，从而对指定的文件夹进行指定的操作：修改删除或者其他操作。
比如前端传的参数包括三个变量，一个文件名路径，另一个就是操作方法（如复制、删除或者修改等等），第三个作为前边操作方法的参数补充
这样就可以实现你所想要的操作。

---

如有问题及时沟通