vue的webpack 自动补全了css浏览器前缀?

Question

用vue init webpack xxx 创建了一个目录
在App.vue文件里的 style里写了less代码,
问题是编译后的文件自动补全了浏览器前缀, 但是我没找到补全浏览器前缀的插件, 是谁帮我补全的前缀?
另一个问题是, 正确的找到这个问题答案的途径应该是什么?

#app .tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

Answer 1

vue-cli 生成的项目里样式插件是自动插入的， 在 build/utils.js 里

autoprefixer 配置在 .postcssrc.js

Answer 2

去看一下postcss插件就知道了

Answer 3

如一楼所说，vue-cli的脚手架生成项目引用插件是自动插入的，一般都会在webpack.base.conf.js当中进行声明

Webpack.base.conf.js

var vueLoaderConfig = require('./vue-loader.conf')
...
rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
...

因此less部分配置的loader首先先要引用postcss-loader

      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!postcss-loader!less-loader'
      },

之后再在vue-loader的loader当中配置postcss-loader的引用插件

vue-loader.conf

  options: {
    postcss: [require('autoprefixer')],
  }

这样，我们就可以直接在vue内部和外部引用相应的less文件了

而脚手架构建出来的样式引用配置一般都是在util文件下进行提供。