一次与客户端合作的走坑之旅！

  　　项目经理给客户端提出了个需求，加急做用户反馈界面，很急，安卓客户端项目开发就一个人，表示干不了，短时间内完成不了，于是商量了一番，把前端的我搅和进去了，让新增的用户反馈界面用H5开发。甩锅于前端，经理说赶紧做，当天要！于是那天临近午饭时间，通知这个事情让我干，我心里是真的不是滋味，心里mmp。随即给我UI，告诉我说UI会裁好图给我。这图一直到下午4点，离下班还有两个小时的时候才给我的。这种做事效率让人心塞啊！但是也顾不得抱怨了，三下五除二，使用vue+vue-router+vant足以满足需求开发了。最终在下班之前还是打包交给服务器端了。

　　服务器端部署项目之后，打开界面，白屏界面不出来，而且还不报错！这就尴尬了，没报错那是真的难找问题。他们服务器的人也倒腾了半天，没效果，我就不信邪，我说我以前打包的项目都是这样的，没出现过这样的问题。我就把这个项目部署在了自己的阿里云服务器上，试试看，却能看到界面效果！这就摸不着头脑了，问题还是要解决的。试了几次，终于找到了问题，router的history模式导致的问题。因为我自己的服务器的nginx配置时对这个mode进行了处理的，所有是没有问题，而这个项目的服务器端时没有对这个模式进行匹配处理的。那就先来说说vue-router的history模式了。

　　HTML5 History模式

　　vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const Router = require('vue-router')
const router = new Router({
   mode:'history',
   routes: [...]  
})

当使用history模式时，url就像正常的url如https://i.cnblogs.com/EditPosts.aspx?opt=1。不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

后台服务器nginx的配置需加上：

location / {
  try_files $uri $uri/ /index.html;
}

完整的vue-router 的history模式可以点此学习：https://router.vuejs.org/zh/guide/essentials/history-mode.html

由于当时服务器没有对这个history模式进行nginx配置，我只好把router处的mode:'history'去掉。后面那些路由不好看的啥子东西服务器那边配置的时候自行解决了。

　　本以为都告一段落了，谁知这才刚刚开始。测试站测试人员提bug了。客户端测试人员用的安卓机，可不是正常的手机，是用那种低端机进行测试的，所以与我们在稍好一点的手机上看到的效果差别还是很明显的。测试人员说：进入H5页面会有闪屏出现，那个banner图片会闪一下再出来，体验很不好。

我看了一下效果之后，我那是就有点底了，h5刚出来的时候，本应该是banner占据的位置，被下面的内容占据了，我心中一想可能是没有给图片的容器进行高度设置，才让这种闪屏出现。我觉得还应该对图片进行压缩处理，因为在移动端，对图片的压缩还是非常有必要的。虽然有时候有些损失图片的质量，但是其实在移动端，还是很难觉察到差别的。经过了对图片的高度设置和压缩之后，这种闪屏好了很多。

　　解决了这个闪屏bug，满以为可以了。可是客户端的需求是不断改变的。客端户需要在无网络状态下，进入h5首页，然后连网之后，可以在页面上进行交互。

　　我当时脑子是蒙的，我是拒绝的，我说这个应该是你们客户端解决的事情吧，客户端人员说需要三份代码，因为我们坐的这个用户反馈h5是有三种不同的语言的，中文、印尼语和英文，所以还是需要打包三份代码，用以针对三种不同语言的需求。以保存在客户端本地。打包好三份代码给客户端之后，客户端在无网络的情况下，打开用户反馈app，会自动调取本地存储的文件，这个时候问题就出来了，里面的icon图片位置有破图出现，而且点击进行交互没有反应，客户端显示的h5发起的请求地址居然是本地地址。这两个bug我是这样解决的：

1、icon图片破图

　　当图片不存在时，出触发onerror事件，这个时候我们就可以处理一下来让网页美观一些，有两个方法

• 让这个图片元素隐藏 

  <img src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/>

• 用默认的图片替换 

  <img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/>

我使用的第二种方法，在vue中我们可以这样使用:

data() {
    return {
         defaultImage: "this.src="+require('./assets/error.png')
     }
}

<img src="图片的url地址" alt="图片XX" onerror="defaultImage"/>

2、无网络状态下调用客户端本地的文件，之后打开网络后，进行页面交互发起的请求地址不对

使用vue+webpack打包上线的的文件，是需要部署在线上服务器的，能够以http等协议进行访问，在项目里面进行api请求，在线上都是以域名进行访问请求的，比如域名是：https://olqa.faceworld.top/，进行的api请求就是 https://olqa.faceworld.top/api/getCatogryList/lang=zh#/。当使用客户端本地的文件时，进行的请求访问地址就变成了 file://XXX/api/getCatogryList/lang=zh#/，这样的请求交互当然是不生效的。后来服务器开发人员给了我一个建议，让我写绝对地址，就是在交互请求的地址上把域名加上去。如下：

　　　　　　axios({
                    url: 'https://olqa.faceworld.top/olqa/api/faq/getList.do',//把域名加上去
                    params: data,
                    method: 'POST',
                }).then(res => {
                    if(res.status == 200 && res.data.data.length > 0) {
                        this.page ++;
                        this.searchList = this.searchList.concat(res.data.data);
                    }else if(res.status != 200){
                        this.loading = false
                    }else {
                        console.log('没有结果');
                        this.finished = true;
                    }
                    this.loading = false
                }).catch(err => {
                    console.log('net timeout');
                    this.loading =false;
                })

之后进行打包交给客户端存储在本地。这也算是一种解决方法吧。

　　任何项目完成上线都不是一帆风顺的。这不，测试人员说在低端机上，h5的首屏加载时间有点长，让我去研究研究改善用户体验。vue的SPA页面都是通过打包后的js文件进行解析后生成dom进行页面渲染的，如果对于js文件的解析比较慢，是会导致首屏加载时间较长。想着如果进行预渲染，可能会有出奇效果。找到了一款插件：prerender-spa-plugin，

可以把页面单独打包出来，而且打包出来的index.html文件可以直接访问打开，如果放在客户端本地的话，效果应该不错。于是就试试：

1、安装

 npm install prerender-spa-plugin --save-dev

 2、webpack.prod.conf.js增加部分代码

const PrerenderSPAPlugin = require('prerender-spa-plugin')   //引用插件
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const webpackConfig = merge(baseWebpackConfig, {
    plugins: [
        // vue-cli生成的配置中就已有这个了，不要动
        new HtmlWebpackPlugin({
            filename: config.build.index,
            template: 'index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency'
        }),
        // 配置PrerenderSPAPlugin
        new PrerenderSPAPlugin({
            // 生成文件的路径，也可以与webpakc打包的一致。
            staticDir: path.join(__dirname, '../dist'),
            
            // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
            routes: ['/', '/detail','/search'],
           
            // 这个很重要，如果没有配置这段，也不会进行预编译
            renderer: new Renderer({
                inject: {
                  foo: 'bar'
                },
                headless: false,
                // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                renderAfterDocumentEvent: 'render-event'
            })
        })
    ]
})

 3、在main.js中加入以下代码

new Vue({
  el: '#app',
  router,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

4、使用npm run build打包，dist文件里面有每个路由对应的包 

 

 而且这里面直接打开index.html文件能够进行访问。

把这种打包后的文件给了客户端，确实让首屏的加载速度上去了。只是这样打包的文件要比以前打包的文件体积稍大一点，不过综合比较，觉得这样的体验稍好一些，因为都是本地资源，加载速度还是比较快的。

与客户端合作之旅暂告一段落！

 个人博客地址：https://www.zengfanping.com/