Как использовать IFrame в Electron для сайта Localhost Vue.js - PullRequest
0 голосов
/ 12 июня 2019

Я новичок в 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 (см. Ниже).

enter image description here

Но когда я запускаю свое приложение как электронное приложение, оно выходит из строя и выдает ошибку, как показано ниже.

enter image description here

Каков ПРАВЫЙ способ использования iframe от электрона для доступа к локальному сайту Vue?

Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...