vuetify webpack simple - npm run build -/dist/

Question

私はvuetify webpack-simpleを使ってvuetifyプロジェクトを持っています。このプロジェクトでは、タグにバインドされた各イメージのsrcとデータオブジェクトのイメージパスでv視差タグを使用しています。イメージはsrc> assets>イメージにあります。プロジェクトが開発サーバー上で実行されているときに画像が表示されますが、プロジェクトをビルドすると、画像はdistフォルダにコピーされません。私は私のプロジェクトに合うようにファイルローダーを設定しなければならないと思っていますか？注意して、私はdistフォルダにコピーされている2つの画像があります。これらの画像は、V視差タグにはありません。可能であればお手伝いください。

が

<section> 
    <v-parallax :src="about.whiskey"> 
     <v-layout column align-left justify-center> 
      <h1 class="beige">{‌{ about.mission.header }}</h1> 
      <h6 class="beige">{‌{ about.mission.subheader }}</h6> 
     </v-layout> 
    </v-parallax> 
</section> 
export default { 
    data() { 
     return { 
      about: { 
       whiskey: '../../assets/images/bf-whiskey-glass.jpg', 
       whiskeys: '../../assets/images/three-whiskeys.jpg', 
       metrics: '../../assets/images/metrics.jpg', 
<section> 
    <v-parallax :src="about.whiskeys"> 
     <v-layout column align-right justify-center> 
      <h1 class="beige text-sm-right">{‌{ about.solution.title }}</h1> 
     </v-layout> 
    </v-parallax> 
</section> 
<section> 
    <v-parallax :src="about.metrics"> 
     <v-layout column align-left justify-center> 
      <h1 class="beige">{‌{ about.press.title }}</h1> 
     </v-layout> 
    </v-parallax> 
</section> 



=========================================================================== 

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' 
    }, 
    resolve: { 
    extensions: ['.js', '.vue'], 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js', 
     'public': path.resolve(__dirname, './public') 
    } 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      loaders: { 
      } 
      // other vue-loader options go here 
     } 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modul 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
      // use: [ 
      //  { 
      //   loader: 'url-loader', 
      //   options: { 
      //    limit: 8192 
      //   } 
      //  } 
      // ] 
     loader: 'file-loader', 
     options: { 
      objectAssign: 'Object.assign' 
     } 
     }, 
     { 
     test: /\.styl$/, 
     loader: ['style-loader', 'css-loader', 'stylus-loader'] 
     } 
    ] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    noInfo: true 
    }, 
    performance: { 
    hints: false 
    }, 
    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({ 
     sourceMap: true, 
     compress: { 
     warnings: false 
     } 
    }), 
    new webpack.LoaderOptionsPlugin({ 
     minimize: true 
    }) 
    ]) 
} 

Answer 1

をありがとう私は、ファイル・ローダーでのurl-ローダーを置き換えます。それは、プロジェクトを構築するときに適切な方向に導くべきです。ファイルがdist/assets/images/

{ 
    test: /\.(jpe?g|png|gif|svg)$/i, 
    use: [ 
     { 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]', 
      outputPath: '/assets/images/' 
     } 
     } 
    ] 
    }, 

全コンテキストにoutputPathオプションで、outputPath: '/assets/images/'だろう出力はあなたのイメージを終わるどこにも変更することができ

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' 
    }, 
    resolve: { 
    alias: { 
     'public': path.resolve(__dirname, './public') 
    } 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      // vue-loader options go here 
     } 
     }, 
     { 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     use: [ 
      { 
      loader: 'file-loader', 
      options: { 
       name: '[name].[ext]', 
       outputPath: '/assets/images/' 
      } 
      } 
     ] 
     }, 
     { 
     test: /\.js$/, 
     loader: 'buble-loader', 
     exclude: /node_modules/, 
     options: { 
      objectAssign: 'Object.assign' 
     } 
     }, 
     { 
     test: /\.styl$/, 
     loader: ['style-loader', 'css-loader', 'stylus-loader'] 
     } 
    ] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    noInfo: true 
    }, 
    devtool: '#eval-source-map', 
    performance: false 
} 

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.LoaderOptionsPlugin({ 
     minimize: true 
    }) 
    ]) 
}