首页/ 填坑/ 文章详情

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

uni-app h5打包 阿里云 OSS 静态部署 发布于 2021-04-11

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

胖螺胖螺 02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!
强哥强哥 2021-12-08 15:49
怎么看文章作者是谁呀?
big2catbig2cat 2021-08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到
HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪