Я новичок в Electron js и использую Vue для создания своего настольного приложения.
Я использую Vue Electron Builder lib для создания электронного приложения на основе Vue.
Мне нужно визуализировать страницу Vue ( About.vue ) из iframe объекта, который находится в WebWindow.vue .
Ниже мой App.vue код
<template>
<div id="app">
<div v-if="nested">
<div id="nav" style="background: blue;">
<router-link to="/">Home</router-link>|
</div>
<router-view/>
</div>
<div v-else>
<router-view/>
</div>
</div>
</template>
<script>
export default {
computed: {
nested: function() {
return this.$route.meta.nested;
}
},
};
</script>
Мой router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: { nested: true }
},
{
path: '/about',
name: 'about',
component: About,
meta: { nested: false }
}
]
})
С вышеупомянутым router.jsнастройки, я могу отобразить О странице, используя макет, который отличается от Home.
My WebWindow.vue
<template>
<div class="hello">
<iframe
sandbox="allow-scripts"
src="http://localhost:8080/about"
scrolling="yes"
style="height: 400px; width: 600px;"
></iframe>
</div>
</template>
<script>
export default {
name: "WebWindow"
};
</script>
Как мы видим из WebWindow.Vue выше.Я использую объект iframe для открытия About.vue (http://localhost:8080/about).
. Этот метод отлично работает, когда я рендерим его из браузера Chrome (см. Ниже).
Но когда я запускаю свое приложение как электронное приложение, оно выходит из строя и выдает ошибку, как показано ниже.
Каков ПРАВЫЙ способ использования iframe от электрона для доступа к локальному сайту Vue?
Спасибо.