如何在 Vue3 中使用 second.html 动态启动应用程序？
Posted
技术标签:
【中文标题】如何在 Vue3 中使用 second.html 动态启动应用程序？【英文标题】：How to start an application dynamically with second.html in Vue3? 【发布时间】：2022-01-23 18:11:39 【问题描述】：我正在开发一个 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'
);
还有我的 second.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 方法打开第二个屏幕时，我无法同时访问 store 对象和我想使用的组件不起作用。我试过了；
second.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");
不知何故，我尝试在 second.html 中运行，但收到类似“[Vue 警告]：无法挂载应用程序：挂载目标选择器”的警告。代码无论如何都不起作用。你能帮帮我吗？
【问题讨论】：
【参考方案1】：openNewPage() 无法为新打开的页面运行脚本；只有新页面可以运行自己的脚本。当openNewPage() 尝试app2.mount() 时，它会在自己的页面（不是新页面）上运行该代码，从而导致您观察到的错误。
解决方案
从openNewPage() 中删除安装代码，使其仅打开新页面：
export default
openNewPage()
window.open('second.html', …);
更新second.html以加载挂载应用程序的脚本，并删除<div id="appSecond">中不必要的<template>：
<body>
<div id="appSecond" style="height:100%">
<span>message</span>
</div>
<script src="./second.js"></script>
</body>
在second.js 中，添加挂载您的应用的代码：
// second.js
import createApp from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#appSecond')
【讨论】：
我试过了，但我做不到。因为当我添加 问题中的second.html 不包含该字符串，因此您没有真正按照答案中的说明进行操作，或者问题中的表示不准确。你能分享一个重现问题的链接吗？
我在项目中稍微改变了我的需求，我的问题类型也发生了变化，我正在分享链接。 github.com/frknclskn/manyPageOneStore
您链接的项目与原帖完全不同。您需要发布一个新问题来涵盖这个新用例，以便熟悉该主题的人可以回答。如果可以的话，我会插话的。
是的，我知道这种情况。我只是在寻找解决方案，但找不到类似问题的解决方案。我正在尝试不同的解决方案。非常感谢。以上是关于如何在 Vue3 中使用 second.html 动态启动应用程序？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Vue3 中启用仅使用 TypeScript 的道具键入