问题描述
在 iOS 开发过程中，我们可能会发现这样的问题。一个用 webpack 打包的web项目，部署在远端服务器一切正常。但是把它放到本地，放到工程目录中，用 iOS 的 webview 无法正确打开他的 index.html。所有的图片都显示不出来，js也无法正确加载。
在服务器之所能加载
因为webpack所生成文件，说有路径都是相对路径，是相对于根目录的。
部署在服务器时，所要资源文件路径，都是相对于站点域名的。根目录就是站点域名。
譬如：运行基础路径是 H5，资源路径是 /static/logo.png，站点是 my.domain.com。生成的文件中的路径变成 /h5/static/logo.png
在站点中加载，完整路径
不支持 file协议打开
如果本地打开，无论是用 pc 浏览器，还是手机上的 webview。都是依靠file:// 协议
该协议特点，没有站点的说法，根目录是 file:///
所以在加载 /static/js/pages-index-index.ca45c656.js 时，实际上是加载：
file:///static/js/pages-index-index.ca45c656.js
当然找不到
解决方式
更改工程的运行基础路径配置
最为直接的方法是，把所有路径的前缀，由 / 开头改成 ./。但是
但是，只修改 index.html 是没有用的，全局替换又不切实际的。
不论是用 vue 、 react 还是 uni-app 开发的项目，都有一个叫运行基础路径。我们需要修改 web 项目的运行基础路径，改为 .。
以uni-app项目为例。具体做法是，打开项目的 manififest.json，在h5配置中找到运行的基础路径 ，将其改为 ./。这样一来，uni-app打包脚本会根据我们的配置，自动将所有资源路径改为以.为前缀。这样一来，问题就解决了。
如果你使用源码视图打开的，请找到h5.router.base ，将其改为./
"h5" : {
"title" : "oa-client",
"domain" : "127.0.0.1",
"router" : {
"base" : "./"
}
}
值得注意的是，vue 项目也有类似的配置。
用 WKWebView 打开
由于 UIWebView 已经弃用，我们只介绍用 WKWebView 打开的方法。代码很简单
if let path = Bundle.main.path(forResource: "h5", ofType: nil)
{
let full = "(path)/index.html"
let url = URL(fileURLWithPath: full)
webView.loadFileURL(url, allowingReadAccessTo: URL(fileURLWithPath: path))
}
值得注意的是，allowingReadAccessTo 参数是必不可少的，从参数名可以知道，我们需要给予 index.html 中脚本访问资源路径的权力。
另外，把 h5 文件夹拖入工程的时候，需要勾选 Create folder references。
也就是说 h5 文件夹作为整体，需要出现在 Copy Bundle Resources 下。
