Question

当父目录中的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 之后strong>，当使用可执行文件运行应用程序时，没有任何效果，并且不会显示index.html文件。

我试图在package.json文件中使用文件配置，但未成功：

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

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

Answer 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">

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

1 个答案: