Question

我正在构建一个电子应用程序，在开发中使用此代码加载html文件：

<webview id="foo" src="/src/documents/example.html" style="display:inline-flex; width:100%; height:550px"></webview>

这在开发中效果很好，但是一旦打包了应用程序，它就会显示空白页面。我已经研究了一下，看来使用__dirname可能会解决此问题。

我对电子还很陌生，无法弄清楚如何使用(src="/src/documents/)到达这条路径__dirname。

我们将不胜感激任何帮助。

Answer 1

我想我将分享我在此找到的解决方案。基本上，您需要像这样为要加载的页面创建路由：

{
  path:'/example',
  name:'example',
  component: require('@/components/example').default
},

如果您正在使用electron-vue，请确保页面扩展名是“ .vue”，然后将页面内容括起来，如下所示：

<template>
<html>
**Put the page content in here**
</html> 
</template>

就我而言，我想通过单击按钮转到页面，所以我使用了Vue-router，如下所示：

<button type="button" class="btn btn-light"><a id="home"><router-link :to="{ name: 'example' }"> Button text </router-link></a>
</button>

瞧！