当 index.html 具有相对路径时如何使用 Electron-Builder 构建答案

【问题标题】：How to build with Electron-Builder when index.html has relative path当 index.html 具有相对路径时如何使用 Electron-Builder 构建
【发布时间】：2020-02-14 22:22:40
【问题描述】：

我想在父目录下 index.html 文件时用 Electron-builder 构建一个用 electron.js 编写的项目，一个简单的应用程序，结构如下：

project
├── css
│   ├── style.css
│   └── img.png
├── electron
│   ├── main.js
│   └── package.json
│── index.html
│── index.js
└── icon.png

在 main.js 文件中使用 win.loadFile('./../index.html');，在电子文件夹中使用 electron . 命令时一切正常，但在运行 electron-builder 后，当使用可执行文件运行应用程序没有任何作用，并且 index.html 文件没有出现。

我试图在 package.json 文件中使用 files 配置但没有成功：

"build": {
    "appId": "x.y.z",
    "productName": "projectName",
    "files": ["**/*", "build/icon.*", "../**/*"]
  },

我不知道该怎么办？！
我发现了这个问题https://github.com/electron-userland/electron-builder/issues/2693，但无法理解，不知道该怎么办？

【问题讨论】：

您是否在 package.json 中添加了"main":"index.js"？

标签： electron electron-builder

【解决方案1】：

一般情况下我无法回答，但这里是使用 vue-electron-builder 和 TypeScript 时的解决方案。这将允许您以任意层次组织文件。

在您的项目根目录中创建一个文件vue.config.js（这或多或少对应于您使用 webpack 进行电子项目所需的覆盖）：

    module.exports = {
        pluginOptions: {
            electronBuilder: {
                // my 'main' process is in src/main.ts:
                mainProcessFile: 'src/main/main.ts',
                // my 'main.ts' should get recompiled if any of these change:
                mainProcessWatch: [
                    'src/main/extra_file_1.ts',
                    'src/main/extra_file_2.ts',
                ]
            }
        },
        pages: {
            // I only have one renderer process (otherwise I'd need another entry in 'pages')
            "renderer": {
                // 'main' for the renderer process
                entry: "src/renderer/main.ts",
                // this is the part you care about: you can put the template anywhere
                template: "src/viewer/index.html",
                // this makes sure your renderer page has all the ts-to-js chunks it needs
                chunks: ["chunk-vendors", "chunk-common", "renderer"]
            }
        }
    };

请注意，如果您希望 index.html 到 <link> 成为静态 css 文件，则应将静态文件放在项目根目录的 public 文件夹中。然后你可以像这样链接到它：

<link rel="stylesheet" href="<%= BASE_URL %>my_css_file.css">

【讨论】：