我对 Webpack 和 Javascript 前端总体来说是新手,所以大多数时候我只是使用其他人的样板。
下面是我尝试加载的 png 文件的加载器,它有 2 个 webpack 配置,这个是 webpack.renderer.config.js:
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: 'url-loader',
query: {
limit: 10000,
name: 'imgs/[name].[ext]'
}
}
},
还有这个 webpack.main.config.js (只有值得注意的代码片段):
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: path.join(__dirname, 'app/dist')
},
我正在使用 Vue 和 Electron,顺便使用来自 GREG 的样板
如果我直接将 ./dist
文件夹放在 ./dist
文件夹中,我可以在 mainComponents.vue
上显示 .png
图像,但当我这样做时总是失败按照应有的方式放入 Assets 路径,
GET http://localhost:9080/assets/img/GeneralOutageFlow.png 404 (Not Found)
已经尝试使用 require 和 import 但没有成功,这是我的文件夹结构:
dist
src
|
|-main
|-renderer
|
|-assets
|-components
|-mainComponents
|
|-mainComponents.vue
如何将 GeneralOutageFlow.png
引用到 /assets/img
?谢谢。
最佳答案
尝试设置output.publicPath配置到/assets/
。
喜欢:
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: path.join(__dirname, 'app/dist'),
publicPath: '/assets/'
},
关于javascript - Webpack dev img 文件夹始终指向 ./dist,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44845946/