Я уже настроил autoprefixer в webpack2 в моем проекте Vue2, но он не работает! Кто может мне помочь

Question

Я уже настроил autoprefixer в webpack2 в моем проекте Vue2, но он не t work in iOS8.3 Dingtalk app.In Simulator Dingtalk App,my webApp don t добавляет -webkit- во всех flex и все меньше стиля игнорируется. Но я создаю проект ios с wkwebview, запустите мой проект, все стиливправо.

Мое веб-приложение, работающее в Dingtalk:

Моя конфигурация: 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 для вывода конфигурации веб-пакета для просмотра.Фрагмент выглядит следующим образом:

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
    }
  }
]

Я знаю, что вам нужно importLoaders: 1 при использовании vue-loader @ ^ v15 (https://vue -loader.vuejs.org / guide / pre-processors.html # postcss ) возможно, это ваша проблема?