Я использую 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
Я новичок в веб-пакете и пытался загрузить его по-разному, но я не могу заставить его работать, вы можете помочь мне решить эту проблему? ? Большое спасибо!