我已经在我的Vue2项目中的webpack2中配置了autoprefixer，但是它不起作用！谁能帮帮我

Question

我已经在我的 Vue2 项目中的 webpack2 中配置了 autoprefixer，但是它没有t work in iOS8.3 Dingtalk app.In Simulator Dingtalk App,my webApp dont 在所有 flex 中添加 -webkit- 并且所有更少的样式都被忽略了。但是我创建了一个 ios 项目 使用 wkwebview 运行我的项目，所有样式都是正确的。

我在钉钉中运行的webapp：

我的配置： webpack.base.conf.js

'use strict'

const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}



module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

vue-loader.conf.js

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  },
  options: {
    postcss: [require('autoprefixer')],
  }
}

.postcssrc.js

module.exports = {
  "plugins": {
    "postcss-import": {},

    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "precss":{},
    "postcss-calc":{},
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
  }
}

谁能指出我的错误，或者给我一个正确的配置，非常感谢

Answer 1

我确定这不是您想要的答案，但开箱即用的 vue-cli 具有有效的配置，即使不选择任何额外功能也是如此。然而，这不是 webpack 2。

我只编辑了.postcssrc.js 以匹配您的浏览器设置

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 7']  
    }
  }
}

并使用display:flex 进行测试，结果为： display: -webkit-box; display: -webkit-flex; display: flex;

使用vue inspect > somefile.js 输出 webpack 配置来查看。 一个 sn-p 看起来像这样：

test: /\.less$/,
use: [
  {
    loader: 'vue-style-loader',
    options: {
      sourceMap: false,
      shadowMode: false
    }
  },
  {
    loader: 'css-loader',
    options: {
      minimize: false,
      sourceMap: false,
      importLoaders: 1,
      modules: true,
      localIdentName: '[name]_[local]_[hash:base64:5]'
    }
  },
  {
    loader: 'less-loader',
    options: {
      sourceMap: false
    }
  }
]

我知道你在使用 vue-loader@^v15 (https://vue-loader.vuejs.org/guide/pre-processors.html#postcss) 时需要importLoaders: 1，也许这是你的问题？