业务场景-uniapp框架的web应用访问地址加前缀

244 阅读2分钟

目前有一个业务场景,甲公司做的微信小程序里有一个入口(大应用在甲公司服务器),点击进来就是我们的应用(我们的应用在我们服务器上),所以需要甲公司在他们那边配置nginx反向代理。

原本的解决方案是甲公司根据nginx官方文档在他们的nginx.conf文件中写上相应的配置,大致如下

	server{
		listen 80;
		location /serviceone/ {
			proxy_pass http://ipone:portone/
		}
		location /servicetwo/ {
			proxy_pass http://iptwo:porttwo/
		}
	}

需要注意的是

image.png

按照上述的配置,我们有斜杠采用的是绝对路径。但在业务中,我们发现无论加不加/,都是相对路径。所以我们考虑将所有资源前面都配上一个代理前缀。

在uniapp中,我们在manifest.json文件中的web配置中,去配置我们需要的运行的基础路径如/serviceone/

image.png

这样的配置会导致我们打包后的unpackage文件夹中的index.html文件中的资源文件路径前加上了一个/serviceone/

image.png

在浏览器上,前端打包后的文件的运行逻辑是,先访问index.html,通过首页文件访问资源文件。现在所有资源文件都被指向在一个/serviceone/的文件夹下。所以我们需要创建一个和index.html同级的serviceone文件夹,然后把assets文件夹扔进去。知道了assets文件夹该放在哪里,还剩下一个static文件。

此时我们只需要找到首页里指向的js文件,看看访问static里文件的路径

image.png

我们可以在开发者工具的Network中看到static文件的路径和assets同级,所以将static包也扔进serviceone文件夹中

image.png

到此访问地址的的前缀配置就全部结束了,我们可以看到不仅访问地址上加上了前缀,所有资源的访问地址也加上了前缀

image.png

配置完成后,甲公司的相对路径访问就可以正常代理到我们服务的所有资源了