本文发布于 2022-11-17， 最后更新于 1367 天前，其中的信息可能已经有所发展或是发生改变。
文章摘要
粗心犯了个小错 问题复现 vue文件中的文件分布长这样 ├─main │ index.js │ ├─preload │ index.js │ └─renderer │ index.html │ └─src │ App.vue │ main.js │ ├─assets │ │ bg.jpg │ │ g.jpg │ │ icons.svg │ │ │ └─css │ styles.less │ └─c…
粗心犯了个小错 问题复现 vue文件中的文件分布长这样 ├─main │ index.js │ ├─preload │ index.js │ └─renderer │ index.html │ └─src │ App.vue │ main.js │ ├─assets │ │ bg.jpg │ │ g.jpg │ │ icons.svg │ │ │ └─css │ styles.less │ └─components Versions.vue 我在 App.vue 中需要引用 bg.jpg ，那么相对于 App.vue 来说 g.jpg 的相对路径自然是 ./assets/g.jpg ,然而这么做的结果就是 404 not found 。 错误分析 这一点也不意外啊，因为相对于浏览器来说，浏览器显示的是 index.html ，那么 相对路径 的 原点 自然应该是 index.html ，所以正确的相对路径应该是相对于 index.html 的 ./src/assets/g.jpg ,那么改的结果真是这样嘛。 事实也确实如此，这么做以后就能正常访问了。粗心犯了个小错
问题复现
vue文件中的文件分布长这样
stylus (Auto identified)
├─main
│ index.js
│
├─preload
│ index.js
│
└─renderer
│ index.html
│
└─src
│ App.vue
│ main.js
│
├─assets
│ │ bg.jpg
│ │ g.jpg
│ │ icons.svg
│ │
│ └─css
│ styles.less
│
└─components
Versions.vue
我在App.vue中需要引用bg.jpg，那么相对于App.vue来说g.jpg的相对路径自然是./assets/g.jpg,然而这么做的结果就是404 not found。
错误分析
这一点也不意外啊，因为相对于浏览器来说，浏览器显示的是index.html，那么相对路径的原点自然应该是index.html，所以正确的相对路径应该是相对于index.html的./src/assets/g.jpg,那么改的结果真是这样嘛。
事实也确实如此，这么做以后就能正常访问了。
本文采用 CC BY-NC-SA 4.0 协议进行授权，如无注明均为原创，转载请注明出处。
标题：electron-vite项目中vue文件的图片引用问题作者：九仞之行链接：http://dev.styunlen.cn/archives/post-1519.html
还没有评论呢 ~ 快来抢沙发吧 🛋️