如何使用 webview 加载本地 html 文件

Question

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

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

这在开发中运行良好，但应用程序打包后显示空白 page.I 已经研究过，似乎使用 __dirname 可能会解决问题。

我对电子还是很陌生，不知道如何使用 __dirname.

到达这条路径 (src="/src/documents/)

任何帮助将不胜感激。

Answer 1

我想我会分享我在 this.Basically 附近找到的解决方案，您需要为要加载的页面创建一个路由，如下所示：

{
  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>

瞧瞧！

How do I load a local html file using webview