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开发，在图片引用时留了个心眼，特意查如何引用图片资源，来回查文档之后才使用修改前的方案。万万没想到事后还是翻了车，翻车的代价是耐心的考验：一个人默默查找图片路径，一个一个手动修改，含着泪吞下苦果。

阅读 2960 填坑收藏发布于 2021-04-11 举报

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

uni-app Canvas 可以生成PDF文件图片预览?!

Vue axios 请求API接口：获取不到参数的那些事