vue打包之后在ios上白屏

在 Vue.js 中，通过 `vue-cli-service build` 命令来对项目进行打包，生成的文件中会包含一些静态资源文件（CSS、JS、图片等）和一个入口 HTML 文件。当我们在 Web 端访问时，这些静态资源文件会被下载下来并通过入口 HTML 文件被引用，然后浏览器根据这些静态资源文件和入口 HTML 文件构建 Client-Side Rendering（CSR）的页面。

但是，当我们把 Vue.js 项目打包成 iOS 应用后，在 iOS 平台上有可能会遇到白屏的情况，也就是 WebView 中无法正常渲染页面，而且没有任何报错信息，这让很多开发者感到迷惑。

造成这种情况可能的原因有很多种，下面让我们分析一下可能会导致 iOS 上 Vue.js 打包后白屏的情况及其解决方法。

## 原因一：Webview 配置问题

iOS 设备中一般都是通过系统内置的 WebView 来渲染 HTML、CSS 和 JavaScript 的。WebView 的配置信息和 JavaScript 引擎的版本与操作系统相关，不同的设备版本可能会存在兼容问题。

通常来说，后台服务会根据不同的设备和操作系统返回适应的资源和配置信息，如果后台返回的配置信息有误，就可能会导致 WebView 无法正常加载资源，进而出现白屏的情况。

解决方法：

在代码层面上，可以采用检测 Webview 的版本并根据版本做不同的兼容处理，避免出现兼容性问题。

通过后台配置文件的设置，把 WebView 的版本信息和业务逻辑分离开来，从而降低出现兼容性问题的可能性。

## 原因二：缓存问题

如果在开发 Vue.js 项目时，我们对代码进行了更新却未清除浏览器缓存，这时打包出来的代码可能仍然会被缓存到移动端的 WebView 中，进而导致页面无法正常渲染并出现白屏的情况。

解决方法：

为了解决这个问题，我们需要在打包时加上配置信息，使生成的代码能够强制清除缓存，以确保客户端可以获取到最新的资源文件。

可以将相关的配置信息添加到 Webpack 配置文件中，webpack.prod.conf.js 文件的 output 配置中添加如下配置：

```

module.exports = {

// ... 省略其他配置 ...

output: {

publicPath: '/',

filename: '[name].[chunkhash].js',

chunkFilename: '[name].[chunkhash].js'

}

}

```

在 `vue.config.js` 中如下配置：

```

module.exports = {

filenameHashing: true

}

```

这样可以避免出现代码缓存问题，但需要注意的是文件的 hash 值需要在更新后进行变更。

## 原因三：JS 压缩配置问题

在默认情况下，Vue.js 会通过 Webpack 对打包出的 JavaScript 代码进行压缩，以达到减小文件大小的目的，但是对于一些特殊的 JavaScript 代码，压缩后可能会导致代码运行问题，进而引起 WebView 无法正常加载的问题。

解决方法：

控制 JS 压缩过程，需要我们在打包时配置不对该部分内容进行压缩。一种解决方法是，通过在 `vue.config.js` 文件中添加 `minimize` 配置来默认关闭压缩：

```

module.exports = {

// ... 省略其他配置 ...

productionSourceMap: true,

configureWebpack: config => {

config.optimization.minimize = false