Je développe un projet 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");
et mon 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>
Et mon 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>
Mon objet de magasin ;
export default createStore({
state: {
message:'Hello'
}
});
et mon deuxième .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>
Lorsque j'ouvre le deuxième écran à l'aide de la méthode OpenNewPage, je ne peux pas accéder à l'objet store et le composant que je souhaite utiliser ne fonctionne pas. J'essaye ;
Second.js
const app2 = createApp({
});
export { app2 };
et ma méthode
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");
}
}
}
D'une manière ou d'une autre, j'ai essayé d'exécuter secondaire.html mais j'ai reçu un avertissement du type "[Vue warn] : Impossible d'installer l'application : Installation du sélecteur de cible". Quoi qu'il en soit, le code ne fonctionne pas. Pouvez-vous m'aider?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
openNewPage()无法为新打开的页面运行脚本；只有新页面可以运行自己的脚本。当openNewPage()尝试app2.mount(), il exécute le code sur sa propre page (au lieu d'une nouvelle page), provoquant l'erreur que vous avez observée.Solution
Supprimez le code de montage dans
openNewPage()pour qu'il n'ouvre que la nouvelle page :export default { openNewPage() { window.open('second.html', …); } }MISE À JOUR
second.html以加载挂载应用的脚本，并删除<div id="appSecond">中不必要的<template>:Dans
second.js, ajoutez le code pour installer votre application :// second.js import { createApp } from 'vue' import App from './App.vue' import store from './store' createApp(App).use(store).mount('#appSecond')