在 Vue3 中使用 secondary.html 动态启动应用程序-PHP中文网问答

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




    
    
    
    
    <%= htmlWebpackPlugin.options.title %>

还有我的 App.vue；

我的商店对象；

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

和我的第二个.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]：无法安装应用程序：安装目标选择器”的警告。无论如何，代码不起作用。你能帮我吗？

解决方案

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

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

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

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

// second.js import { createApp } from 'vue' import App from './App.vue' import store from './store' createApp(App).use(store).mount('#appSecond')