vue-cli 打包之后图片引用路径；

Question

这是我的组件的路径；
./src/components/home目录下；

图片的路径：
./static/img目录下；

当我在开发的时候，引用图片的时候路径需要这样写（home组件中引用图片）：

我需要回退两个路径才可可以访问到./static/img下的图片；

问题：
当我npm run build 之后；生成的html中；home组件引用的图片路径也会回退两个路径；这样就报错了；
打包之后的图片地址不用回退两个路径，因为他们就在./static/img目录下，html文件和static是同级目录；

栗子：
这是我在home文件中引用的背景图片的地址：

打包之后的路径：

右键在新网页打开图片的路径：

beta/static/css/static/img/**.jpg
正确的路径应该是：
beta/static/img/**.jpg;
这里被加上了/static/css，不知道怎么回事。

webpack的配置中：

这个是怎么打包的。。。。

Answer 1

推荐将静态文件放入static文件夹使用绝对路径。

---

以vue-cli生成的demo为例:

• logo.png在static中：

    <img src='/static/img/logo.png'/>

• logo.png在assets中：

    <img src='../assets/img/logo.png'/

• webpack配置

    assetsPublicPath: './'

建议阅读：assets 和static的区别

Answer 2

更改build/utils.js文件中的 ExtractTextPlugin 的 options配置.

if (options.extract) {
return ExtractTextPlugin.extract({

use: loaders,
publicPath: '../../', //注意: 此处根据路径, 自动更改
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}

Answer 3

把你的图片资源放到static文件下，不论你是在vue文件中，还是在css文件中都这样使用：

<img src='/static/img/...'>
background:url('/static/img/...)

这样打包之后就不会出现图片路径错误了，否则vue-cli不会给你一个static文件夹啊，是不是

Answer 4

可以在webpack配置，css使用的时候就是 ~ + 定义的名字 + 路径
background: url("~img/common/logo_w133h65.png");
但是这样之后有一个不好的地方就是写路径没有提示了，
所以还有一个办法，用过改变文件夹位置，就是css文件和vue文件找到img的路径要一致，这样写相对路径既有提示，也不会报错

Answer 5

楼主能把解决方法贴出来吗？

Answer 6

请问我也遇到同样的问题，请问楼主如何解决的?

Answer 7

楼主,解决了嘛？遇到和你同样的问题了