vue打包后,一些静态资源通过URL访问不到
今天写微信转发,需要直接用url写分享图片的地址。不是第一次写微信转发了,以前都是我自己手copy到服务器上,发一版就要copy一次,烦不胜烦。
const shareInfo = {
title: '微信转发',
desc: '微信转发测试\r\n 微信转发测试',
link: "https://www.xxxxxx.com",
imgUrl: 'https://www.xxxxxx.cn/static/img/share.jpg'
}
分享标题和描述成功了,但是图片没有出现。直接访问这个图片地址,显示大大的404,那肯定是图片地址错了。
然后就开始找原因,查看了打的包里的图片文件夹,并没有找到 share.jpg。但是发现其他的图片文件都是以 a.7a2c09b.jpg形式出现的。那分享图片在哪里呢?会不会也变成share.jh65465.jpg?
网上查资料,知道可能的原因:
1. vue打包图片时,一些小的图片会被直接转为base64,存在指定的css中,所以我们找不到share.jpg相关的资源。
2. share.jpg打包后变成了share.随机数.jpg
总之,就是vue自身的打包机制把share.jpg弄没的。那打包的时候可不可以不处理特定的静态资源呢?
可以,放在src同级的static文件中,打包时不处理其中的文件
然后打包,看打包文件
有了,放服务器上也可以通过https://www.xxxxxx.cn/static/share.jpg访问到了。
有一点小毛病,可改可不改。我们打包的其他图片资源都在static > img文件夹下的。一张图片和static、index.html同级。那以后像share.img之类的但不限于图片的资源多了呢?吃藕。
反正都是图片打包后就都放在img下就顺眼了。就在static文件夹下建img文件,把share加进去。然后打包,看
当然,这样访问路径也变掉了,多了一个img层: https://www.xxxxxx.cn/static/img/share.jpg
说了一大堆,大部分都是过程,其实就一句:
打包发布后,还想用url访问到特定的静态资源,就把静态资源放在src同级的static下