v-cloak这个指令的用处是啥相信大家都知道。这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。官方文档的用法是这样的
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
如此一来，{{message}}就不会先出现了。但是实际工作中，常常不止一个css文件，通常会需要用到打包工具，模块管理工具。这里有个坑就是和webpack一起使用时发现的。
相信很多小伙伴在使用webpack打包css，js的时候都会发现这个问题，为什么我明明写了
[v-cloak]{
display: none;
}
然而vue还是会显示Mustache标签。
原因就在于你的css很有可能是写在js中
//xxx.js
import 'css/base.css'
import 'css/xxx.css'
import Vue from 'vue'
...
//todo..
然后用webpack一起打包css和js，这样浏览器会先加载js再加载css，那么v-cloak自然不起作用了，来自文档的解释👇
css嵌入js打包时的问题
👇是一个简单的 错误示范
//webpack.config.js
module.exports = {
entry: './css/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
}
}
/要打包的js
import './css/index.css'
import Vue from 'vue'
使用的正确姿势
- 首先安装
extract-text-webpack-plugin
cnpm i --save-dev extract-text-webpack-plugin
- 加载
var ExtractTextPlugin = require('extract-text-webpack-plugin');
- 配置
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader'
}),
}]
},
plugins: [
new ExtractTextPlugin('styles.css')//这里是输出时的文件名，输出目录为output的path
],
- 最后在html里引入css就好了
<link rel="stylesheet" href="dist/styles.css">
