Ссылка на ресурсы из папки dist с vue + webpack в электронном приложении - PullRequest
1 голос
/ 04 февраля 2020

Я использую vuejs + веб-пакет + электрон.

Мне трудно найти путь к моему активу.

Структура моего проекта следующая:

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

Я загружаю ресурс stati c в папку dist с помощью загрузчика файлов.

Мой webpack.config. js выглядит следующим образом:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './app/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.js'
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader',
        }
      },

      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },

      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015'],
            plugins: ['transform-runtime']
          }
        }
      },
      {
        test: /\.(jpe?g|png|gif|svg|ico)$/,
        exclude: /node_modules/,
        loader: "file-loader?name=/assets/icons/[name].[ext]"
      },
    ]
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },
  plugins: [
    new webpack.ExternalsPlugin('commonjs', [
      'electron'
    ])
  ],
  node: {
  __dirname: true,
  fs: 'empty',
  module: 'empty',
  net: 'empty',
  tls: 'empty'
},
externals: ["fs"]
}

В компоненте fileA . vue Я пытаюсь сделать следующее:

<template>
    <div>
        <img :src= "link">
    </div>
</template>

<script>
import Aa from '../assets/icons/a.png'

export default {

  data () {
    return {
      link: '',

    }
  },

  created() {
    this.link = Aa;
},
   ...
</script>

Но у меня возникает следующая ошибка:

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

Изображения отображаются загруженными по правильному пути в dist / assets / icons, но Electron пытается загрузить его с

file:///assets/icons/a.png

Я новичок в веб-пакете и пытался загрузить его по-разному, но я не могу заставить его работать, вы можете помочь мне решить эту проблему? ? Большое спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...