Vue Cli Webpack Hintergrund URL Pfad Problem

Verwenden von Vue CLI.Vue Cli Webpack Hintergrund URL Pfad Problem

Aus irgendeinem Grund haben einige meiner Bilder, wenn ich sie direkt in der scss beziehen und sie nicht dynamisch an mein Vue-Objekt binden, Probleme mit relativen Pfaden.

Angenommen, ich habe eine Vue-Vorlage mit einer Div-Box. Box hat einen Hintergrund URL dieses:

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

, die lokal ganz gut funktioniert, wenn ich npm Lauf dev laufen. Aber wenn ich Build ausführen, funktioniert es nicht. 404 Fehler. Ich habe auch versucht, dies zu tun:

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

Und das hat nicht funktioniert.

So gibt es diese:

webpack css-loader not finding images within url() reference in an external stylesheet

Und wenn ich dies in webpack.config ändern:

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

An:

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

Es wird Chunk Bilder erstellen in Mein Webpack wurde mit Hashes für Cache-Speicher erstellt. Und nur für diese spezifischen Bilder, die nicht in dem Vue-Objekt gebunden sind.

Und dann muss ich diese Bilder in den Root-Dist-Ordner ziehen .... anstatt was ich tun möchte, die sie in einem IMG-Ordner relativ zur HTML-Datei (HTML-Datei ist einfach):

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

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

Hier ist meine webpack config:

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

Quelle

2016-09-22 pwhitt

ich es geschafft, das Problem mit den folgenden Schritten zu replizieren:

das folgende Verzeichnis Unter der Annahme:

root/ 
    dist/ 
    src/ 
    assets/ 
     |--box.jpg 
    components/ 
     |--home.vue

und zu Hause.vue:

<template> 
    <div class="foo"> 

    </div> 
</template> 

<script> 
    export default { 
    } 
</script> 

<style> 
    .foo { 
    background: url('../assets/box.jpg') 
    } 
</style>

Nach der Anwendung erstellen und die Dateien im dist Ordner speichern, alles funktioniert, wenn ich die integrierten Dateien mit diesem Befehl innerhalb dist Ordner (ich benutze lite-server der Einfachheit halber) dienen:

lite-server index.html

wenn ich jedoch in den Stammordner zurückgehen und versuchen, das gleiche tun:

lite-server dist/index.html

ich werde das gleiche prob begegnen lem wie du.

Wie ich in der Regel, um dieses ist durch das Bild zuerst importieren und verwenden es dann mit Inline-Stil:

<template> 
    <div v-bind:style= "{ 'background-image': 'url(' + box + ')' }"> 
    Placeholder 
    </div> 
</template> 

<script> 
    // @ is an alias to /src 
    import box from '@/assets/box.jpg'; 

    export default { 
    data() { 
     return { box }; 
    } 
    } 
</script>

Auch die folgenden Diskussionen Besuche:

Quelle

2018-02-08 14:34:38 kevguy

hängt davon ab, wo Ihr Root-Set, Sie background: url('~/assets/img/box.jpg') oder background: url('~/src/assets/img/box.jpg') versuchen könnte,
einer von ihnen arbeiten sollten

Quelle

2018-03-09 18:37:27 ShaneX

Vue Cli Webpack Hintergrund URL Pfad Problem

Antwort

Verwandte Themen