Vue Cli Webpack後臺url路徑問題

由於某些原因，如果我直接在scss中引用它們，並且不將它們動態綁定到我的vue對象，則會出現相關路徑問題。

說我有一個名爲框的div的vue模板。箱有這樣的背景下網址：

.box的{ 背景：網址（ '../ IMG/box.jpg'）

當我運行NPM運行dev的那本地工作就好了。但是當我運行構建，它不起作用。 404錯誤。我也試着這樣做：

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

並沒有奏效。

因此，有這樣的：

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

當我改變這webpack.config：

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

要：

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

它會在創建組塊圖片我的webpack構建與哈希緩存。只適用於那些未綁定在vue對象中的特定圖像。

然後，我必須將這些圖像拖到根dist文件夾....而不是我想要做的是保持它們在相對於html文件的img文件夾中（html文件很簡單）：

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

問題是，我是否必須綁定數據中的每一個單獨的img ...或者我不能直接引用圖像，如果我知道它不會被改變。

或者我的sass加載器/ webpack中有一些設置丟失了。

這裏是我的WebPack配置：

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

來源

2016-09-22 pwhitt

我設法通過以下步驟來複制你的問題：

假設以下目錄：

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

和家電。VUE：

<template> 
    <div class="foo"> 

    </div> 
</template> 

<script> 
    export default { 
    } 
</script> 

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

在dist文件夾中生成的應用程序和保存文件後，如果我發球dist文件夾中使用此命令的內置文件一切正常（我用lite-server爲簡單起見）：

lite-server index.html

但是，如果我回去的根文件夾，並嘗試做相同的：

我會遇到相同的概率像你一樣。

如何我通常的解決辦法是，首先導入圖像，然後使用它與內嵌樣式得到：

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

還檢查了以下討論：

來源

2018-02-08 14:34:38 kevguy

取決於你的根目錄集，你可以嘗試background: url('~/assets/img/box.jpg')或background: url('~/src/assets/img/box.jpg')，其中
一個應該工作

來源

2018-03-09 18:37:27 ShaneX

Vue Cli Webpack後臺url路徑問題

回答

相關問題