v-cloak老是不起作用？

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'

使用的正确姿势

1. 首先安装extract-text-webpack-plugin

cnpm i --save-dev extract-text-webpack-plugin

2. 加载

var ExtractTextPlugin = require('extract-text-webpack-plugin');

3. 配置

module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: 'css-loader'
            }),
        }]
    },
    plugins: [
        new ExtractTextPlugin('styles.css')//这里是输出时的文件名，输出目录为output的path
    ],

4. 最后在html里引入css就好了

<link rel="stylesheet" href="dist/styles.css">

参考链接
webpack文档
简书