uniapp如何打包h5(uniapp怎么打包成微信小程序)

2022-08-01 10:34:52 浏览数 (1)

大家好,又见面了,我是你们的朋友全栈君。

uni-app在打包成h5时,默认是不支持直接打开的,因为打包出来是 (/xxx/xxx)这种格式,这点和vue-cli3.0是一致的,在用vue-cll3.0时打包我们会想到在vue.config中配置publicPath,把它配置成(./),但是你在uni-app中是找不到这个文件的,其实在uni官网是有提到publPath,但是说的并不明确(https://uniapp.dcloud.io/collocation/manifest?id=publicpath)

如果我们想打包成直接浏览的h5,我们需要配置manifest.json这个文件,在其中的h5配置中加入publicPath配置,配置如下:

代码为:

代码语言:javascript复制
	"h5" : {
		"publicPath": "./"
	},

配置好这个后,以后打包就会生产(./xxx)的引用,这样就可以通过浏览器直接打开而不需要架设成一个服务。但是需要注意的是

当用css引用图片即backage-image:url(./xxx/xxx.png)这种格式引用图片时,地址需要写出./格式。这样运行和打包都可以找到该图片。但这种的话打包成小程序可能找不到图片,所以当正式使用时最好写成(../../xxx.png)的形式。

当采用src引用时需要写出相对路径即(../../static/xxx.png),但是这样打包后是找不到该图片的,最好通过变量和require(‘../../static/img/java_05.png’) 读取图片。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/126864.html原文链接:https://javaforall.cn

0 人点赞