vue.js - vue-cli webpack css中的图片路径问题

问题描述

问 题

我使用vue-cli中的webpak模板，在.vue文件中我在css中引用图片
template中引用一张
style的css中引用一张
目录结构如图

app.vue

hello.vue

当我npm run build后 多了个dist,如果我进入dist目录anywhere启动服务器
那么地址是 http://192.168.10.13:8000/#/
此时 两张图片正常
css:

.hello[data-v-2e7268e9] {
    width: 200px;
    height: 200px;
    background: url(/static/img/logo.d19a753.png) 0 0 no-repeat;
}

如果我在src目录下用anywhere启动服务器
那么地址是 http://192.168.10.13:8000/dist/
此时所有js css 404

我线上环境不在根目录下 也不能改到根目录下 所以放上去也是这种404

如果我改配置config/index.js
assetsPublicPath 从'/'改为 '',则只有css引用的图片找不到
http://192.168.10.13:8000/dist/static/css/static/img/logo.d19a753.png Failed to load resource: the server responded with a status of 404 (Not Found)

此时生成的css为

.hello[data-v-2e7268e9] {
    width: 200px;
    height: 200px;
    background: url(static/img/logo.d19a753.png) 0 0 no-repeat;
}

线上环境不能放在根目录下，要使css中引用的图片也正常 应该修改哪里

解决方案

assetsPublicPath 改成 /dist/就行了

这篇关于vue.js - vue-cli webpack css中的图片路径问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！