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

核桃夹过的门

812410

发布于
2017-02-22

Dont

7k153552

更新于
2017-02-22

我使用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中引用的图片也正常应该修改哪里

vue-cli vue.js webpack

阅读 41.3k

11 个回答

✓ 已被采纳

assetsPublicPath 改成 /dist/就行了

fhy_crystal

14256

发布于
2017-06-15

在Stack Overflow上看到一个答案，经试验，不论是字体还是图片的引用问题都能解决图片描述

lavyun

1.1k3919

发布于
2017-02-24

vue-loder不能转换<style>标签中的路径。
所以你可以:

1.把样式写到一个css文件中，并在main.js或者.vue文件中引入进来。

import "path/xxx.css"

2.webpack里面一切皆模块，所以你可以把图片require进来：

<template>
    <div :style="img"></div>
</template>

<script>
    export default {
        data(){
            return {
                 img: {background: "url(" + require(path/xxx.png) + ")"}
            }
        }
    }
</script>

伊吾鱼

76411

发布于
2017-05-08

static是项目外的静态文件，一般情况下，是用于直接在dist/index.html 中引入的
但如果你需要在项目内引用，并保证build后引入正确，有两种方法。
1.import引入，通过webpack打包
2.将静态资源优先部署，在项目内直接用绝对路径
这是我所能想到的办法

Raymond

4.3k42663

发布于
2020-10-21

更新于
2020-10-22

vue 项目中引入图片（静态资源）方式总结

vue 文件中引用

<img src="@/assets/img/bg@2x.png" >
<i :style="`background-image: url(${require('@/assets/img/bg@2x.png')});`"  />

或者

<img :src="passport" >

<script>
export default {
  data() {
    return {
      passport: require('@/assets/img/bg@2x.png'),
    }
  },
}
</scipt>

style 文件中引用

.demo{
  background-image: url("~@/assets/img/bg@2x.png");
}

如果想要使用static而不是assets，请参考： https://github.com/vuejs/vue-...

半妖

9611124

发布于
2017-02-22

assetsPublicPath = '/'这样写就是本地的，如果有问题，应该是你本地写的有问题

YPanda

333138

发布于
2017-02-22

我目前是修改他build 后的index.html 文件，自动注入部分引用前面全都加了个.
也就是如同

<link href=./static/css/app.b2c23336cfa4d1cae4f501316a9a7fa9.css rel=stylesheet>
<script type=text/javascript src=./static/js/app.c83e2ac24cfcf6f4765b.js></script>

让他以当前根目录去相对寻找。因为暂时还没有去看webpack这一块目前就这么在用 - -