H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

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

图片的路径:
./static/img目录下;
clipboard.png

当我在开发的时候,引用图片的时候路径需要这样写(home组件中引用图片):

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

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

clipboard.png

clipboard.png

栗子:
这是我在home文件中引用的背景图片的地址:
clipboard.png

打包之后的路径:

clipboard.png

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

clipboard.png

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

webpack的配置中:

clipboard.png

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

clipboard.png

回答:

推荐将静态文件放入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的区别

回答:

更改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)
}
}

回答:

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

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

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

回答:

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

本文地址:H5W3 » vue-cli 打包之后图片引用路径;

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址