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

【问题标题】：How do I load a local html file using webview如何使用 webview 加载本地 html 文件
【发布时间】：2019-04-08 13:43:24
【问题描述】：

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

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

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

我对电子还是很陌生，不知道如何使用__dirname 到达这条路径(src="/src/documents/)。

我们将不胜感激。

【问题讨论】：

【解决方案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>

瞧！

【讨论】：