首页/ 填坑/ 文章详情

uni-app H5打包:阿里云OSS部署静态资源

uni-app H5打包发布后,生成index.html与static文件夹。从打包文件来看,H5生成的是一个单页面应用,static存放压缩后的静态资源。考虑到项目部署到线上后,访问量将不再是小打小闹。

公司从运营角度来看,能够降低运营费用,花最少的钱做最多的事,那都是大功一件,将静态资源部署到阿里云的OSS提上日程。

开启引用阿里云OSS静态资源:

- 打开文件manifest.json,切换到源码视图
- 找到h5配置对象参数,添加publicPath属性

Json"h5" : {
        "title" : "抵到烂",
        "domain" : "https://www.didaolan.cn",
        "devServer" : {
            "https" : false
        },
        "router" : {
            "base" : "./",
            "mode" : "hash"
        },
        "publicPath" : "https://static.didaolan.cn"
} 

再次打包H5后,index.html文件里静态资源指向publicPath的路径,H5页面顺利运行起来,但发生图片掉失现象。图片资源没有引用到publicPath设置的路径,所以需要重新修改引用图片的资源。

修改前<image>引用:

HTML<image src="/static/logo.png"/>

修改后<image>引用:

HTML<image :src="require('static/logo.png')" >

由于第一次使用upp-api开发,在图片引用时留了个心眼,特意查如何引用图片资源,来回查文档之后才使用修改前的方案。万万没想到事后还是翻了车,翻车的代价是耐心的考验:一个人默默查找图片路径,一个一个手动修改,含着泪吞下苦果。

文章评论0 records

最新 最早

0

最新评论Latest comments

HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)
HentaiCatHentaiCat 2020-11-02 15:28
(ಡωಡ)很实用,直接拿走...