logo标签列表

Vue Cli Webpack 背景图片路径问题

sasswebpackvue.js
11

使用Vue CLI。

由于某些原因，如果我在scss中直接引用图像并且没有将它们动态绑定到我的Vue对象上，其中一些图片的相对路径会出现问题。

假设我有一个名为“box”的div的Vue模板。 Box的背景url如下：

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

当我运行npm run dev时，它在本地工作得很好。 但是当我运行构建时，它就无法工作了，显示404错误。 我还尝试过这样做:

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

但那没起作用。

所以有这个：

webpack css-loader在外部样式表中的url（）引用中找不到图像

当我在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>

问题是，我是否需要绑定每一个来自数据的Vue图像...还是只有当我知道它不会被更改时才可以直接引用图像。

或者是我在sass loader/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()
  ])
}
3个回答
5

尝试使用'~@/'的url前缀

background-image: url('~@/assets/box.jpg');
问题已解决，谢谢！ - Nifel
2

取决于你的根目录设置在哪里，你可以尝试 background: url('~/assets/img/box.jpg') 或者 background: url('~/src/assets/img/box.jpg')，其中一个应该会起作用。

2

我可以通过以下步骤复制你的问题：

假设有以下目录：

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

以及 home.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

然而，如果我返回到根文件夹并尝试做同样的事情：
lite-server dist/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>

同时也请查看以下讨论：

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接