vue.js - 如何使用 Electron 开发的应用程序的生产模式中引用其他html文件？

Question

我在构建 Electron 应用程序时遇到问题，这是使用 electronic.js 和 vue.js 制作的。
开发几乎完成了，所以我需要构建它并进行生产。

基本上，我的项目具有许可证系统，因此在程序启动时，用户应通过输入许可证 key 来激活它。我在activate.html 中编写了此部分。因此，在公用文件夹中，有两个html文件，一个是默认的 index.html ，另一个是activate.html

在 activate.html 内部，激活成功后，将调用startMain()javascript函数。在此功能内，程序将导航到主程序，尤其是 index.html 。该html文件是Vue应用程序，然后启动主程序。

All this process is working fine in the development mode. But when it comes to production, this is not working anymore. I probably know why this happens, this is just because index.html is not available in production mode when all these are built up.

Alternatively, I tried to load localhost:8080 inside startMain(). But also this works fine in development mode, but unluckily, we don't have localhost server on production mode, so this doesn't solve the problem.

这是activate.html 中的startMain()

    function startMain() {
        window.__static = "index.html";
        // Alternatively, we can use location.href on development mode.
        // window.location.href = "http://localhost:8080/";
    }

这是background.js( Electron 主机)

    function createWindow() {
        // Create the browser window.
        win = new BrowserWindow({
            width: 1400,
            height: 900,
            titleBarStyle: "hiddenInset"
        });
        win.setMenuBarVisibility(false);

        if (isDevelopment) {
            // Load the url of the dev server if in development mode
            // win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);

            win.loadURL(`file://${process.cwd()}/public/activate.html`);
            // if (!process.env.IS_TEST) win.webContents.openDevTools()
        } else {
            createProtocol("app");
            // Load the index.html when not in development
            win.loadFile("activate.html");
        }

        win.on("closed", () => {
            win = null;
        });
    }

What I want is to make it run correctly in production mode. Specifically, when the user finishes activation flow ( activate.html), it should start main program ( index.html )

请帮我解决这个问题。我欢迎任何评论。

我使用vue-cli-plugin-electron-builder包构建了此应用程序

Answer 1

在Vue中，通常使用vue-router在 View 之间切换。您是第一次在background.js中设置BrowserWindow.location，但之后便进入Vue应用程序，并进行如下路由器调用:

router.replace({ name: "index" }).catch(() => { });

如果不查看其余的activate.html，很难猜测要如何处理。您需要在您的应用程序中定义路由器，并且可能希望将您的activate.html转换为activate.vue组件，并使它成为您应用程序的正确首页。

我认为cli-plugin样板程序将调用main.js，在其中您将定义应用程序并对其进行引导。您在此处添加路由器:

import router from "./router";



window.$app = new Vue({
    router,

在引导函数中，您还可以调用router.replace({name:“activate”})之类的东西，以使用激活的vue组件启动应用程序。