uni-app H5上传采坑
-
今天在使用uni-app上传H5的时候遇到了一些问题,现在想要分享一下。
uni-app是什么
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。即使不跨端,uni-app同时也是更好的小程序开发框架。(官网上是这么说的)
我们讨论一下上传的问题
uni-app在上传H5的时候会有很多关于相对路径的问题,官网的相关路径提示如下:
-
css背景图片url:
-
image标签src路径:
从上面可以看出,uni-app还不能很好的满足我们前端的相对路径上传的要求,这该怎么办呢?
搞了一天后,我终于摸索出了一套方法,来满足相对路径的需求:
- JS文件:上传前,先将
manifest.json
的h5配置项修改为:
//manifest.json "h5" : { "title" : "这是title", "router" : { "mode" : "history", "base" : "./" /* 以当前目录作为运行基础路径 */ }, "domain" : "", "publicPath": "./" }
- css背景图片:
.className { background-image: url("./static/image/bg.jpg"); /* 前面加./ */ background-repeat:no-repeat; background-size:100% 100%; -moz-background-size:100% 100%; }
- image图片:所有图片使用<img>标签,并且把路径作为变量名传入。使用变量名的目的是防止框架”恶意“地在src前添加某些东西,比如/pages/或者/。
<img :src="imgurl" lazy-load="true"></img> <script> export default { data(){ return { imgurl: "这是图片路径" //例:'./static/images/1.png' } } } </script>
- video视频:<video>标签会在uni-app编译过程中会把路径添加上工程路径,所以不能使用类似与img的方式。因此视频路径只能使用绝对路径。
<video src="/static/video/视频.mp4" controls></video>
点击发行->网站-H5手机版即可打包为H5,打包完成后会有以下目录结构:
注:img为css背景图片打包生成的,你也可以在实现项目的时候把图片放在img目录下。注:在填写的绝对路径上,框架打包后会在绝对路径上添加
manifest.json
中的base
根目录头。注:在本地运行在浏览器上可能会发生路径错误,需要在打包好的文件夹build下自行添加相应的路径文件夹,然后在cmd中运行
python -m http.server
进行检查。另外值得注意的是,在浏览器地址栏上输入url的时候是不能在后面加上
index.html
的,否则就会出错。
以上就是我在这天采坑总结。总的一句话,uni-app真的难用。
-
-
所以你在招新 h5 中用了这个方案吗?
-
此回复已被删除!
-
@wqy 是的。在图片路径的时候,只能使用赋值的方法,但是视频就不行了