Lancarkan aplikasi secara dinamik menggunakan secondary.html dalam Vue3

Saya sedang membangunkan projek vue3.

main.js;

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import store from "./store";
app.use(store);
import router from "./router/index";
app.use(router);
...

//just try...
app.mount("#app");

dan public/index.html saya

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

    <style>
        body {
            margin: 0px;
        }
    </style>
</head>
<body>
    <noscript>
        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>
</html>

Dan App.vue saya;

<template>
        <button @click=openNewPage()>create new page</button>
        <span>{{message}}</span>
        <router-view />
    </template>
    <script>
        methods:{
            openNewPage(){
                var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
    
            }
        }
    </script>

Objek kedai saya;

export default createStore({
    state: {
      message:'Hello'
    }
});

dan .html kedua saya;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Cache-Control" content="no-store" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title></title>
</head>
<body>
    <div id="appSecond" style="height:100%">
        <template>
            <span>{{message}}</span>
        </template>
    </div>
</body>
</html>

Apabila saya membuka skrin kedua menggunakan kaedah OpenNewPage, saya tidak boleh mengakses objek kedai dan komponen yang ingin saya gunakan tidak berfungsi. Saya cuba;

Second.js

const app2 = createApp({
});

export { app2 };

dan kaedah saya

import { app2 } from "../second.js";
openNewPage(){
    var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
    
    if (t) {
        t.onload = function () {
        t.window.app = app2;
        app2.mount("#appSecond");
        }
    }
}

Entah bagaimana saya cuba menjalankan dalam secondary.html tetapi mendapat amaran seperti "[Vue warn]: Tidak dapat memasang aplikasi: Memasang pemilih sasaran". Bagaimanapun, kod itu tidak berfungsi. Boleh kamu bantu saya?

P粉354948724298 hari yang lalu394

Lancarkan aplikasi secara dinamik menggunakan secondary.html dalam Vue3

membalas semua(1)saya akan balas

Penyelesaian