解决vue老项目出现的{{}}问题

       前段时间，研发总监拿着手机过来跟我说，你看这里有个页面刚进来的时候页面有问题，出现了很多{{}}，非常的怪异。老板说的话，不敢轻易怠慢，于是快速的定位到了项目的位置。
       打开项目一看，非常吃惊，居然是一个用vue+webpack最原始的写法搭建的多页面项目，里面还穿插了很多jquery。真的是越看越兴奋，众所周知

以史为镜,可以知兴替;以人为镜,可以明得失

里面虽然有很多写法对于现在来说已经过时了，但是在当时肯定是比较时髦的，可以从里面学习一下前人设计思路。
       膜拜一番之后，开始分析出现的状况，我们先来看下代码：

// js文件
new Vue({
  el: '#page',
  data() {
    return {
      test: '我是内容'
    }
  }
});

// html文件
<div class="page-userInviteRule" id="page">
   {{ test }}
</div>

从html文件可以看出来，当我们浏览器拿到html文件，和执行vue.js之前，它解析出来的内容就是{{test}},
没错问题的原因，就是这么的简单，是不是感觉就像做了一场梦，醒来还是很感动。

于是想了想，没编译完成以前，不显示这坨内容不就好了，但是与之而来的问题就是会增长白屏时间，就是现在这几大框架的一个比较明显的缺点，需要等到相应的js文件执行完毕才能出现界面。

说到这个编译结束，这个尴尬的阶段，那就得请出我们的v-cloak指令了，不太熟悉的同学可以点击进去看下官方文档。

细数了下项目里面有大大小小几十个页面，手动去一个一个改不太现实，所以又想到了html-webpack-plugin这个插件，我们只需要加点小小的改动即可在打包的时候自动注入到每个页面中，废话不多说，贴一下具体的实现吧。

const HtmlWebpackPlugin = require('html-webpack-plugin');

class MyPlugin {
	apply(compiler) {
		compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
			return HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
				'MyPlugin',
				(data, cb) => {
					data.html = data.html
						.replace(
							/<\/head>/,
							'<style>[v-cloak]{display: none;}</style></head>'
						)
						.replace(/id=\"page\"/, 'id="page" v-cloak');
					cb(null, data);
				}
			);
		});
	}
}

module.exports = MyPlugin;

丢进webpack的plugin里面，大功告成，可以自豪的向研发总监交差了。

到这里就差不多解决了，现在都项目应该很少会出现这种问题，只有这种老的刀耕火种的写法，会出现，不过在一次一次的问题中也能学到很多东西，感谢前人留下的宝贵财富。