webpack使用vue.js中的v-cloak，出现问题
使用webpack中的webpack-dev-server和html-webpack-plugins启动的项目
达到了不用使用webpack命令打包就可以实时监听代码变化自动打包
代码
页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
<body>
</body>
</html>
.js文件代码
import './vue_test.css'
import Vue from '../node_modules/vue/dist/vue.js'
var vm=new Vue({
el:"#app",
data:{
msg:'holle word'
}
})
.css文件代码
[v-cloak] {
display: none;
}
页面效果
在ChromeCore浏览器中将network调整到slow3G，然后进行刷新结果如下
当网络足够慢时，会先将插值表达式先显示出来，任然会有闪烁,可是已经使用了v-cloak
在这里插入图片描述
检查一下main.js，webpack在自动打包的时候，会自动将打包好的.js文件导入到页面中
可以看到webpack已经帮我们打包了.js和.css文件
在这里插入图片描述
解决方法
原来的html源码（webpack打包好的）
在这里插入图片描述
出现这种情况的原因
v-cloak指令相当于一个class，对应于手写的那个css样式，当页面加载时，会先将所以加了v-cloak指令的标签先渲染上手写的css样式，等加载到Vue提供的调度器vm时，将数据渲染到页面上时，才会将v-cloak指令从标签中除去。
解决方案
将[v-cloak]样式写在head标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
<body>
</body>
</html>
这样就不会出现闪烁了，赶紧试一下吧。
