临时解决方案：将网站转换为Electron.js应用程序

此临时解决方案解决了以下问题：我可以简单地将一个捆绑的应用程序发送给非技术用户，他们可以通过双击.exe，.app等文件来运行它。不需要节点，docker等。
如果一个实际的解决方案出现在这个线程，我会接受它。但现在也许这有助于有人面临类似的问题。下面我描述的步骤。

什么是Electron.js

Electron是一个
框架旨在使用Web技术创建桌面应用程序，这些应用程序使用Chromium浏览器引擎的版本和使用Node.js运行时环境的后端呈现。
因此，它本质上创建了一个新的浏览器窗口，在其中呈现应用程序。

重现步骤

我主要是遵循video tutorial（归功于LearnVue @ YouTube），电子的快速入门指南和电子 Package 指南。我将写下视频中的步骤以及如何捆绑应用程序：
1.（我在这里假设Vue+Vite应用程序工作正常）
1.安装电子npm模块（npm install --save-dev electron）
1.我们的应用程序应该具有以下结构：

<MY APP>
├── package.json // we already have it
└── main.js      // missing
└── preload.js   // missing
└── index.html   // we already have it
└── ...
└── src/         //  our Vue sources 
|   └── ...
|   └── main.js
|   └── ...
└── ...

基本电子设置需要四个文件：package.json、main.js、preload.js、index.html。（上面列出的src/是我们的Vue应用程序源。）此时，我们只有package.json和index.html文件，因此缺少main.js和preload.js。（注意，我们没有main.js，我们有src/main.js，在非根目录下，这是一个Vite文件，而不是Electron）。
1.创建main.js和preload.js文件：只需使用快速入门指南中的文件内容填充它们。只需对main.js进行一次更改：win.loadFile('index.html')至win.loadFile('dist/index.html')
文件内容：
x一个一个一个一个x一个一个二个x

• 根据视频教程（我最终做了其他事情，见下文），现在我们应该在vite.config.js中设置基本路径：为了使我们的引用正确指向/dist目录，我们必须为整个项目设置基本路径。

将以下行添加到vite.config.js：

• const path = require('path')
• base: path.resolve(__dirname, './dist')，使文件具有以下结构：

...

const path = require('path')

...
export default defineConfig({
    plugins: [vue()],
    ... 
    base: path.resolve(__dirname, './dist')
})

**注意：**在我的例子中，这样做的结果是固定了外部源的绝对路径，导致整个解决方案不再可移植。我只是将基本路径更改为：base: './'而且它工作了，我想可能和可选的步骤6有关。

• 在package.json中：在JSON的根级别添加"main": "main.js"（默认情况下Electron将查找index.js文件，因此我们需要指定新的主文件）：

{
  "name": <NAME>
  "version": <VERSION>
  "main": "main.js",
  ...
}

1.[可选]在package.json中：在"scripts"部分添加"electron:start ."-这将为我们提供一种通过设置运行npm run electron:start来运行应用程序的方法。如果我们只想捆绑它，我认为这一步可以省略。
1.将应用程序打包成捆绑包（.app、.exe等）。：install Electron Packager（npm install --save-dev electron-packager）将以下内容添加到package.json的"scripts"部分：

"electron:build": "electron-packager . <PROJECT NAME> --platform=win32,darwin,linux --arch=x64 --icon=dist/favicon.ico --overwrite"

用你的项目名称替换。平台是win32（Windows），darwin（macOS）和linux。你可以简单地不包括那些不需要的。剩下的参数是CPU架构，图标路径，以及是否覆盖已经创建的捆绑包。

• 现在只需运行：
• npm run build（构建Vue+Vite应用程序并创建dist目录）
• npm run electron:build来创建bundle。请注意，在非Windows系统上构建Windows bundle需要Wine，因此如果可能的话，从Windows机器构建它可能更容易。

我在Windows，Linux和macOS上测试了它。