vue + webpack with electronic appでの静的資産への参照

Question

私はvuejs + webpack + electronを初めて使用しており、これらのツールで新しいプロジェクトを開始しています。

私のタグの資産へのパスを取得するのに苦労します。

マイプロジェクト構造は以下の通りです：

/my-project 
    /app 
    /components 
     componentA.vue 
     ... 
    App.vue 
    main.js 
    /dist 
    /assets 
    logo.png 
    package.json 
    webpack.config.js 
    ... 

マイwebpack.config.jsのようになります。私は次の操作を実行しようとしていたファイルcomponentA.vueで

module.exports = { 
    // This is the "main" file which should include all other modules 
    entry: './app/main.js', 
    // Where should the compiled file go? 
    output: { 
    // To the `dist` folder 
    path: './dist', 
    // With the filename `build.js` so it's dist/build.js 
    filename: 'build.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader' 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015'] 
     }, 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(jpeg|png|gif|svg)$/, 
     loader: "file-loader?name=[name].[ext]" 
     } 
    ] 
    }, 
    resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.common.js', 
    } 
    } 
} 

：

<template> 
    <div> 
     <img class="ui small image" src="../../assets/logo.png"> 
    </div> 
</template> 

<script> 
    ... 
</script> 

しかし、次のエラーがあります。

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///logo.png 

ブラウザはファイル：///logo.pngをロードしようとしました（私の資産の完全なパスではないので間違っています、my-projectディレクトリへのパス全体を見逃しています）ので、私の資産を入れようとしましたoutput/distフォルダには結果は表示されません（しかし、私は正しく実行したかどうかはわかりません）。

この問題の解決にお手伝いできますか？ ありがとう！ WebPACKのは、次の変更を加える必要があり、正しいパスを返すようにするためには

Answer 1

：

<template> 
    <div> 
     <img class="ui small image" :src="imageSource"> 
    </div> 
</template> 

<script> 
    export default { 
     data(){ 
      return { 
       imageSource: require('../../assets/logo.png') 
      } 
     } 
</script> 

参考：https://github.com/vuejs-templates/webpack/issues/126

Answer 2

もう一つの方法は、staticディレクトリに画像を保存することです。これで、イメージパスをhtmlディレクティブの中に直接追加することができます。

<template> 
    <div> 
     <img src="/static/example.png"> 
    </div> 
</template> 

<script> 
    export default {} 
</script>