简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
在 Vue3 中使用 secondary.html 动态启动应用程序
P粉354948724
P粉354948724 2024-03-29 11:54:52
0
1
337

我正在开发一个 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");

和我的 public/index.html

<!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>

还有我的 App.vue；

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

我的商店对象；

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

和我的第二个.html；

<!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>

当我使用 OpenNewPage 方法打开第二个屏幕时，我无法访问商店对象，并且我想要使用的组件不起作用。我正在尝试；

第二个.js

const app2 = createApp({
});

export { app2 };

和我的方法

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");
        }
    }
}

不知何故，我尝试在 secondary.html 中运行，但收到​​类似“[Vue warn]：无法安装应用程序：安装目标选择器”的警告。无论如何，代码不起作用。你能帮我吗？

P粉354948724
P粉354948724

全部回复(1)
P粉514001887
P粉5140018872024-03-30 09:34:57 1 楼

openNewPage() 无法为新打开的页面运行脚本；只有新页面可以运行自己的脚本。当 openNewPage() 尝试 app2.mount() 时，它在自己的页面（而不是新页面）上运行该代码，从而导致您观察到的错误。

解决方案

删除openNewPage()中的挂载代码，使其仅打开新页面：

export default {
  openNewPage() {
    window.open('second.html', …);
  }
}

更新second.html以加载挂载应用的脚本，并删除<div id="appSecond">中不必要的<template>：

  

    {{message}}
  

  sssccc

在 second.js 中，添加安装您的应用程序的代码：

// second.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#appSecond')
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！