vue.js - vue3+electron 如何做到本地化？

Question

我的项目目录如下：

其余 electron 为应用 main.js 主进程存放目录，dist、dist=electron 分别为 vue 的打包目录和 electron 的打包目录

之前我都是将 dist 上传到服务器，后 electron 中通过访问网络地址进行展示操作
但如今客户要求应用本地化，应该怎么做呢？

是将 electron 中的 mainWindow.loadURL() 指向本地 dist 文件？
还是在 electron 中开启本地 http 服务，之后服务指向本地 dist 文件？
而且我现在是打包的两个文件，是否是将 dist 复制到 electron 文件夹后，在进行应用打包？

我有点想不明白，还望指点迷津，谢谢！

---

我已通过上面提到的第三种方式成功打包，并正常显示，但是原点击功能失效在点击时候报错

Answer 1

vue+electron没搞过，但是react弄过。
其中win.loadFile加载的就是你打包后的vue文件。

const createWindow = () => {  let width = 580;  let height = 430;  if (app.isPackaged) {    width = 560;    height = 400;    Menu.setApplicationMenu(null)  }  win = new BrowserWindow({    width,    height,    icon: path.join(__dirname, 'icons/icon.ico'),    webPreferences: {      preload: path.join(__dirname, 'preload.js'),    },  });  ipcMain.on('taskFinish', (event, payload) => {    flashWindow();  });  if (app.isPackaged) {    win.loadFile('dist/index.html');  } else {    win.loadURL('http://localhost:3000/');  }

Answer 2

要将 Vue3 + Electron 应用程序本地化，你需要确保 Electron 的 mainWindow.loadURL() 指向本地的 Vue 打包文件。通常，这意味着你应该将打包后的 Vue 文件（位于你的 dist 或 dist-electron 目录中）作为本地资源加载。

首先，确保你的 Vue 应用程序已经正确地打包到了 dist 或 dist-electron 目录中。然后，在 Electron 的主进程文件（例如 main.js）中，使用 mainWindow.loadURL() 加载本地 Vue 应用的入口文件，例如 mainWindow.loadURL('file://' + __dirname + '/dist/index.html')。

这里是一个简单的步骤指南：

1. 确保 Vue 打包正确：使用 Vue CLI 或其他打包工具将你的 Vue 应用程序打包到 dist 或 dist-electron 目录。
2. 修改 Electron 的 mainWindow.loadURL()：在 Electron 的主进程文件中，将 mainWindow.loadURL() 的值改为本地 Vue 应用的入口文件路径。

mainWindow.loadURL('file://' + __dirname + '/dist/index.html');

3. 复制或链接 Vue 打包文件：如果你的 Electron 应用程序和 Vue 打包文件不在同一个目录中，你可能需要复制或链接 Vue 打包文件到 Electron 应用程序的目录中。
4. 打包 Electron 应用程序：使用 Electron Packager 或 Electron Builder 等工具将 Electron 应用程序打包为可执行文件。

在这个过程中，你可能需要调整一些路径或配置，以确保 Electron 能够正确地找到和加载本地的 Vue 打包文件。此外，如果你的 Electron 应用程序和 Vue 打包文件在不同的目录或驱动器中，你可能需要考虑文件访问权限和路径问题。

希望这可以帮到你！如果你有任何其他问题或需要进一步的解释，请随时提问。