Vue.js填坑记

前言

上一篇文章主要介绍了我们团队的「Vue.js项目模板」的搭建过程，这只是第一步。作为新手，在实际开发过程中，还会遇到各种各样奇怪的问题。本文主要介绍问题的原因以及解决方式。

http://www.heeroluo.net/article/detail/138/vuejs-problems-during-usage

导航栏标题

在单页应用中，由于页面切换不会导致浏览器重新加载页面，所以页面的标题是不会改变的，这时候就要通过Javascript去修改标题。本来这个操作是非常简单的，只需要修改「document.title」即可：

document.title = 'New title';

然而，在iOS的微信和QQ中，这种方法却有可能无效，具体的现象就是：导航栏上的标题没有改变。这是iOS微信和QQ的bug，解决方法就是在修改「document.title」之后，用「iframe」发送一个请求（任意一个请求）。我们可以把相关的代码封装成函数调用：

function setTitle(title) {    document.title = title;    if (isIOS && (isInWeixin || isInQQ)) {        let iframe = document.createElement('iframe');        iframe.style.display = 'none';        iframe.src = '/favicon.ico';        iframe.onload = () => {            setTimeout(() => {                document.body.removeChild(iframe);            }, 9);        };        document.body.appendChild(iframe);    }}

据说新版的微信和QQ已经修复了这个bug，但为了兼容旧版本，这段代码还是必须的。

Nginx中转

在「Vue.js」的项目根目录下，只要运行命令「npm run dev」就可以启动开发服务器，用浏览器打开「http://localhost:端口号」就可以访问页面。然而，使用「localhost:端口号」这个域有两个问题：

• 一是无法获取实际运行环境的Cookie；
• 二是后端接口有可能不允许来自「localhost」的跨域请求。

这种情况下，就要在本地配置一个开发的域名，然后再通过Nginx（或者IIS、Apache）把请求中转到「Vue.js」的开发服务器。具体的Nginx配置可能是这样：

server {    listen 80;    server_name webapp-local.ibeiliao.com;    expires -1;    location ^~ /project-a/ {        proxy_pass http://127.0.0.1:9001;        proxy_set_header Host $host;    }}

接着修改「hosts」，把本地开发用的域名「webapp-local.ibeiliao.com」指向「127.0.0.1」即可。

然而，加了这一层中转后，我发现项目的热更新功能有延迟。具体表现就是：先后对一个文件进行两次修改并按保存，按了第二次保存的时候，浏览器才会更新到第一次保存的内容。搜索了一番才知道，这是因为Nginx默认缓存了所代理的服务器响应的内容，达到一定的量才会返回给客户端。所以只要把缓冲关掉就可以了：

server {    listen 80;    server_name webapp-local.ibeiliao.com;    expires -1;    location ^~ /project-a/ {        proxy_pass http://127.0.0.1:9001;        proxy_set_header Host $host;        # 关闭缓冲        proxy_buffering off;    }}

分享封面图

Webpack中的「url-loader」会把小图片转成base64编码：

{    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,    loader: 'url-loader',    options: {        limit: 10000,        name: utils.assetsPath('img/[name].[hash:7].[ext]')    }}

例如这样的源代码：

<img src="./assets/logo.png">

经过构建之后会变成这样：

<img src="data:image/png;base64,iVBOR...此处省略成百上千个字符...DACog5YM65zugAAAAAElFTkSuQmCC">

移动端的主流浏览器都支持显示base64编码的图片，所以这不会带来兼容性问题。然而，调用微信JSSDK设置分享的封面图时，安卓版的微信并不支持base64编码的图片。

针对这个问题，有两种常见的解决方案。

• 通过其他途径（如FTP）把封面图传到服务器上，然后就可以通过URL进行引用。但是这样一来，封面图就不在当前项目内了。
• 修改「url-loader」的「limit」配置。比如分享封面图是5K，可以把「limit」调整为小于5k，这样「url-loader」就会把图片构建为独立文件而不是base64编码。但是为了一张小图修改整体的打包策略，并不靠谱。

所以，最后用的方案是：把不需要打包的文件统一放在一个文件夹内，然后让「file-loader」取代「url-loader」去处理这个文件夹。假设不需要打包的文件都在根目录下的「static」文件夹内，那么可以这样修改「/build/webpack.base.conf.js」的构建配置：

{    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,    loader: 'url-loader',    options: {        limit: 10000,        name: utils.assetsPath('img/[name].[hash:7].[ext]')    },    include: [resolve('src')],    exclude: [resolve('static')]},{    loader: 'file-loader',    options: {        name: utils.assetsPath('static/[name].[hash:7].[ext]')    },    include: [resolve('static')]}

UIWebView内的奇怪阻塞

这个是在项目的测试过程中发现的问题，总结了一下触发的条件有三个：频繁的事件触发、在该事件的回调中对数据进行了更改、页面滚动。并且，这个问题只在iOS 9以上的「UIWebView」中发生，iOS的「WKWebView」以及安卓的WebView则表现正常。

下面通过一个简单的demo重现此问题。该demo是一个通过audio元素播放音乐的页面，页面中的一个div会显示音乐的当前播放位置。也就是说，在音乐播放的过程中，这个位置的内容会不断改变，符合「事件频繁触发并更改了数据」的条件。关键代码如下：

<template>    <div>        <audio ref="player" :src="audioURL" @timeupdate="updateTime" controls></audio>        <div class="current-time">{{ time }}</div>    </div></template><script>export default {    data() {        return {            audioURL: require('./music.mp3'),            time: ''        };    },    methods: {        updateTime() {            this.time = this.$refs.player.currentTime;            document.title = this.time;        }    }};</script>

常用的APP中，新浪微博还在用「UIWebView」，用它打开demo：

可见，只要滚动了页面，「div.current-time」内的内容就不会再改变了，但是页面标题还是在变化的。这说明，数据变化后更新到界面的过程被阻塞了。进一步排查，往demo中增加按钮「Button1」和「Button2」：

<template>    <div>        <audio ref="player" :src="audioURL" @timeupdate="updateTime" controls></audio>        <div class="current-time">{{ time }}</div>        <input type="button" value="Button1" @click="click1" />        <input type="button" value="Button2" @click="click2" />    </div></template><script>export default {    data() {        return {            audioURL: require('./music.mp3'),            time: ''        };    },    methods: {        click1() { alert('click1'); },        click2() {            Promise.resolve().then(() => {                alert('click2');            });        },        updateTime() {            this.time = this.$refs.player.currentTime;            document.title = this.time;        }    }};</script>

点击播放音乐并滚动页面后，点击「Button1」顺利地弹出了「click 1」，但是点击「Button2」却没有任何反应。这就说明了，被阻塞的是Promise！

找到了问题，就去搜索引擎上寻找答案，但是竟然搜到了「Vue.js」的源代码。本地打开「Vue.js」的源文件，也可以找到这一片代码：

从这里的注释可以发现，「Vue.js」的开发团队也知道Promise在「UIWebView」下的阻塞问题，并进行了修复，但为什么demo页仍然有问题呢？排查bug很重要的一点就是尽量减少重现问题所需的代码和依赖。于是，我用「Vue-CLI」初始化一个新项目，并把demo页放到此项目中。此时再用新浪微博打开页面进行同样的操作，并没有出现阻塞的问题。依次安装「SASS」、「postcss-px2rem」、「Vuex」和「babel-polyfill」，并在每次安装后都重新打开demo页进行操作，最后发现，罪魁祸首是「babel-polyfill」。

iOS 8以上的Safari和WebView已经支持了Promise，但是实测发现，「babel-polyfill」会用自己的Promise覆盖原生的Promise！查看「babel-polyfill」所依赖的「corejs」的代码可以发现，它对Promise的支持检测是比较严格的，除了Promise本身以外，还检测了「PromiseRejectionEvent」以及「species」：

由于iOS下的Promise并没有完全支持这些特性，所以「corejs」用自己的Promise把原生的Promise覆盖了。而且，看起来「Vue.js」对阻塞问题的修复对「corejs」的Promise无效。

这样一来，解决方案有三个：

1. 不要安装「babel-polyfill」，但这样会造成旧版本浏览器下无法运行「Vuex」。
2. 升级到WKWebView，但涉及到客户端的修改，而且修改幅度较大。
3. 加载「babel-polyfill」后，把浏览器的Promise重置回原生的Promise。

考虑到「PromiseRejectionEvent」以及「species」在实际开发中基本用不上，方案3反而是一种比较好的临时解决方案。把「babel-polyfill」的代码文件通过其他方式传到服务器上，然后修改根目录下的「index.html」：

<script>var _Promise;// 检查是否iOS9+（iOS9+才支持Symbol）var useNativePromise = typeof Promise === 'function' &&        /^(iPhone|iPad|iPod)/.test(navigator.platform) &&   typeof Symbol === 'function';if (useNativePromise) { _Promise = Promise; }</script><script src="//s2.imgbeiliao.com/assets/js/lib/babel-polyfill/6.23.0/polyfill.min.js"></script><script>if (_Promise) { Promise = _Promise; }</script>

「babel-polyfill」已通过script标签引入，那就可以删除对它的依赖了：

npm uninstall babel-polyfill --save

然后修改「/build/webpack.base.conf.js」，移除「babel-polyfill」的打包入口：

entry: {    // app: ['babel-polyfill', './src/main.js']    app: ['./src/main.js']}

这种临时的解决方案其实并不优雅，让客户端尽快升级到「WKWebView」才是正道。

后记

实际开发中遇到的问题其实挺多，但因为文章篇幅所限，我只挑了一些常见的，或者解决过程比较曲折的写在这。因为我接触「Vue.js」的时间并不长，写得不对的地方还望大家指正，有更好的解决方案也欢迎提出。