Problema no caminho do URL do fundo do Vue Cli Webpack

Question

Sep 22, 2016, 10:59 PM

Problema no caminho do URL do fundo do Vue Cli Webpack

Usando vue cli.

Por alguma razão, ALGUMAS das minhas imagens, se eu as referir diretamente no scss e não as vincular dinamicamente ao meu objeto vue, terão problemas com caminhos relativos.

Digamos que eu tenha um modelo vue com uma div chamada box. Box tem um URL de fundo disso:

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

Isso funciona localmente muito bem quando executo o npm run dev. Mas quando executo o build, ele não funciona. Erro 404. Eu também tentei fazer isso:

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

E isso não funcionou.

Então tem isso:

O webpack css-loader não encontra imagens na referência url () em uma folha de estilo externa

E quando eu mudo isso no webpack.config:

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

Para:

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

Ele criará imagens do Chunk no meu webpack com hashes para cache. E apenas para aquelas imagens específicas que não estão vinculadas ao objeto vue.

E então eu tenho que arrastar essas imagens para a pasta dist da raiz .... ao invés do que eu quero fazer, é mantê-las em uma pasta img relativa ao arquivo html (o arquivo html é simplesmente):

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

A questão é: eu tenho que vincular todos os vue img dos dados ... ou não posso apenas me referir diretamente a uma imagem, se eu souber que ela não será alterada.

Ou há alguma configuração no meu sass loader / webpack que estou perdendo.

Aqui está minha configuração do 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()
  ])
}