vue webpack 2 autoprefixer dla ie9 +

Question

Używanie Vue generowanego przez Vuecli przy kompilacji pakietu. Magia się dzieje. Nie mogę zrozumieć, jak wygenerować prefiksy dostawców potrzebne do IE.

ta została skopiowana z github numerze: https://github.com/vuejs-templates/webpack/issues/421#issuecomment-284322065

vue-loader.conf.js

var utils = require('./utils') 
var config = require('../config') 
var isProduction = process.env.NODE_ENV === 'production' 

module.exports = { 
    loaders: utils.cssLoaders({ 
    sourceMap: isProduction 
     ? config.build.productionSourceMap 
     : config.dev.cssSourceMap, 
    extract: isProduction 
    }), 
    postcss: [ 
    require('postcss-import')(), 
    require('autoprefixer')({ 
     browsers: ['ie >= 9'] 
    }) 
    ] 
} 

Prosty przykład pojemnik komponent

kontener/index.vue

<template> 
    <div class="container"> 
     <slot></slot> 
    </div> 
</template> 
<script> 
    import './index.scss' 
    export default {} 
</script> 

kontener/index.scss

// this is aliased in webpack.base.conf 
@import "~styles/base-config"; 

.container { 
    @include grid(); // this generates display:flex and border-box resets 
    max-width: 100%; 
    margin: 0 auto; 
} 

Oczekiwany inline wyjściowe generowane w głowę (ale obecnie nie dostać -ms-schematu flexbox lub -webkit- prefiksy)

<style> 
.container { 
    -webkit-box-sizing: border-box; // not generated 
    box-sizing: border-box; 
    display: -webkit-box; // not generated 
    display: -ms-flexbox; // not generated 
    display: flex; 
    max-width: 100%; 
    margin: 0 auto; 
} 
</style> 

pokrewne:

1. webpack2 vue-cli autoprefixer not work in js file when require scss file？

2. https://github.com/vuejs/vue-cli/issues/350 Wystarczy wykorzystuje autoprefixer w vue-loader.conf.js z ostatnich 2 wersjach (użyłem browsers: ['ie >= 9'], nie działa)

3. Potencjalne rozwiązanie: https://github.com/vuejs-templates/webpack/issues/600 jednak otrzymuję błędy źródło mapę w konsoli.

Dodany do budowy/utils.js

// npm install postcss-loader first then edit: 
... 
    var postcssLoader = { 
    loader : 'postcss-loader' 
    } 

    // generate loader string to be used with extract text plugin 
    function generateLoaders (loader, loaderOptions) { 
    var loaders = [cssLoader, postcssLoader] 
    if (loader) { 
     loaders.push({ 
     loader: loader + '-loader', 
     options: Object.assign({}, loaderOptions, { 
      sourceMap: options.sourceMap 
     }) 
     }) 
    } 
... 

Aktualizacja 26-07-2017

Dodany repo tutaj: https://github.com/sidouglas/vue-js-vendor-prefixes-bug

Aktualizacja 08.03.2017

@Chris Camaratta

npm ERR! fetch failed http://uscavs-repo1:8081/artifactory/api/npm/npm-aggregator/vue/-/vue-2.4.2.tgz 
npm WARN retry will retry, error on last attempt: Error: getaddrinfo ENOTFOUND uscavs-repo1 uscavs-repo1:8081 
npm ERR! fetch failed http://uscavs-repo1:8081/artifactory/api/npm/npm-aggregator/vue-router/-/vue-router-2.7.0.tgz 
npm WARN retry will retry, error on last attempt: Error: getaddrinfo ENOTFOUND uscavs-repo1 uscavs-repo1:8081 
^Z ░░░░░░░░░░░░░░░⸩ ⠙ cloneCurrentTree: WARN retry will retry, error on last attempt: Error: getaddrinfo ENOTFOUND uscavs-repo1 uscavs-repo1:8081 
[2] + 56232 suspended npm i 

Answer 1

Zamierzam przyjąć nieco inny takt. Źródłem szablonu Vue/Webpack jest here. Wygląda zupełnie inaczej niż to, co napisałeś powyżej. W konfiguracji szablonu jedyną rzeczą, którą powinieneś zrobić, to "użyj" listy przeglądarek w polu package.json (ref .postcssrc.js).

Jako eksperyment, spróbuj:

1. Wymiana swoje vue-loader.conf.js z this one
2. Wymień Build/utils.js z this one
3. Upewnij się, że masz plik .postcssrc.js w katalogu głównym projektu (obok pliku package.json). Kopiuj this one.
4. Dodaj sekcję browserlist do pliku package.json. Znowu sample here

Więcej informacji na temat zasad BrowserList, look here