Vue Cli Webpack ścieżka adresu url tła

Używanie vue cli.Vue Cli Webpack ścieżka adresu url tła

Z jakiegoś powodu NIEKTÓRE z moich obrazów, jeśli odnosimy się do nich bezpośrednio w scss i nie wiążę ich dynamicznie do mojego obiektu vue, mają problemy ze względnymi ścieżkami.

Powiedz, że mam szablon vue z polem div nazywającym się. Box posiada tła url to:

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

który działa lokalnie dobrze kiedy uruchomić npm run dev. Ale kiedy uruchamiam kompilację, to nie działa. Błąd 404. Próbowałem również w ten sposób:

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

I to nie działa.

Więc jest tak:

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

I kiedy to zmienić w webpack.config:

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

Do:

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

Będzie tworzyć obrazy w Chunk mój kompilator sieciowy zawiera skróty do buforowania. I tylko dla tych konkretnych obrazów, które nie są związane w obiekcie Vue.

A następnie muszę przeciągnąć te obrazy do katalogu głównego folderu root .... zamiast tego, co chcę zrobić, to zachować je w folderze img względem pliku html (plik html jest po prostu):

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

Pytanie brzmi, czy muszę wiązać każdą pojedynczą kopię danych z danych ... lub czy nie mogę po prostu odnieść się bezpośrednio do obrazu, jeśli wiem, że to się nie zmieni.

Czy jest jakieś ustawienie w moim module ładującym/pakiecie internetowym, którego mi brakuje.

Oto mój 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() 
    ]) 
}

Źródło

2016-09-22 pwhitt

udało mi się replikować problemu z następujących etapów:

Zakładając następujący katalog:

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

i domu.vue:

<template> 
    <div class="foo"> 

    </div> 
</template> 

<script> 
    export default { 
    } 
</script> 

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

Po zbudowaniu aplikacji i zapisywać pliki w folderze dist, wszystko działa, jeśli służą wbudowane pliki przy użyciu tej komendy wewnątrz dist folderu (używam lite-server dla uproszczenia):

lite-server index.html

Jednakże, jeśli wrócę do głównego folderu i spróbuj zrobić to samo:

lite-server dist/index.html

będę spotkać ten sam prob lem jako ty.

Jak zwykle obejść to poprzez importowanie obrazu, a następnie używając go w dobrym stylu inline:

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

również zapoznać się z następującymi Dyskusje:

Źródło

2018-02-08 14:34:38 kevguy

zależy gdzie zestaw korzeń, można spróbować background: url('~/assets/img/box.jpg') lub background: url('~/src/assets/img/box.jpg'),
jedna z nich powinna działać

Źródło

2018-03-09 18:37:27 ShaneX

Vue Cli Webpack ścieżka adresu url tła

Odpowiedz

Powiązane problemy