Vue Cli Webpack Problem mit dem URL-Pfad im Hintergrund

Question

Sep 22, 2016, 10:59 PM

Vue Cli Webpack Problem mit dem URL-Pfad im Hintergrund

Mit vue cli.

Aus irgendeinem Grund haben EINIGE meiner Bilder Probleme mit relativen Pfaden, wenn ich direkt auf sie im scss verweise und sie nicht dynamisch an mein vue-Objekt binde.

Say Ich habe eine Vue-Vorlage mit einem Div namens Box. Box hat eine Hintergrund-URL von diesem:

.box {Hintergrund: URL ('../ img / box.jpg')

Das funktioniert lokal einwandfrei, wenn ich npm run dev ausführe. Aber wenn ich build laufen lasse, funktioniert es nicht. 404 Fehler. Ich habe es auch versucht:

.box{
background: url('~../img/box.jpg')

Und das hat nicht funktioniert.

So gibt es das:

webpack css-loader findet keine Bilder innerhalb der url () Referenz in einem externen Stylesheet

Und wenn ich das in der webpack.config ändere:

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },

Zu

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './dist/',
    filename: 'build.js'
  },

Es werden Chunk-Images in meinem Webpack-Build mit Hashes zum Zwischenspeichern erstellt. Und nur für die spezifischen Bilder, die nicht an das vue-Objekt gebunden sind.

Und dann muss ich diese Bilder in den Ordner root dist ziehen .... anstatt sie in einem IMG-Ordner relativ zur HTML-Datei zu speichern (HTML-Datei ist einfach):

<html lang="en">
  <head>

    <meta charset="utf-8">
    <title>vue</title>

  </head>
  <body>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>


    <app></app>
    <script src="dist/build.js"></script>
  </body>
</html>

Frage ist, muss ich jedes einzelne Bild aus den Daten binden ... oder kann ich nicht einfach direkt auf ein Bild verweisen, wenn ich weiß, dass es nicht geändert wird.

Oder es gibt eine Einstellung in meinem Sass Loader / Webpack, die ich vermisse.

Hier ist meine Webpack-Konfiguration:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './dist/',
    filename: 'build.js'
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  vue: {
    html: {
      root: path.resolve(__dirname, './dist')
    }
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.html$/,
        loader: 'vue-html'
      },
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ])
}