uniapp的H5与APP版本统一动态加载js配置文件

接手了一个前后端分离的项目，前端使用vue。作为一个一路使用原生JS、JQ走过来的半路前端技术使用者来说，总感觉类似vue这种框架，不管披着什么先进的思想和技术的外衣，总是摆脱不了画地为牢的内里——用久了会让人再内卷的圈子里傻掉。也许是因为前端的大神们总爱整事儿，前一会儿还要干掉后端，这一会儿又要干掉浏览器……这种造轮炫技的招数还是让大神们去使吧，咱还是老老实实走咱的使用路线——解决问题为第一要务

FeiRouBing

2333人浏览 · 2022-10-25 15:23:02

FeiRouBing · 2022-10-25 15:23:02 发布

临时接手的救火项目，使用uniapp（没用过）开发，要求同时发布H5与APP版本，后端接口是统一的。

由于众所周知（除了我）的原因，两个版本在引入外部配置js的方法上有些出入，所以接手的项目在打包H5和APP的时候要分别修改不同的地方（H5版本配置在一个config.js里面，通过html模板加载），APP版本写在了app.vue里面。

由于几次打包忘记修改了相应配置造成了很不好的影响，深感不便。处于无知者无畏的精神，决定统一配置，没想到一如大坑深似海——

尝试了几个方法，要么H5能用，但APP里面读取不到，要么APP里面好使，H5版本config.js被合并，完全成了摆设。。。

百度都快被翻烂了也没找到合适的方法，然而吹出去的牛皮想要收回来也不易，虽然脸被啪啪的生疼，也要硬着头皮肝下去！

好在功夫不负有心人，研究出来的解决方法如下：（副作用暂不知道）

1. config.js里面：

//接口地址
const ServerUrl="http://127.0.0.1";
try{
    //给H5用的
	window.ServerUrl=ServerUrl;
}catch(e){
    //APP里面用不了window
	console.log("NOT FOR APP");
}
//给APP用的
export default ServerUrl;

2. main.js中

//H5版本动态引入config.js
//#ifdef H5
const script = document.createElement('script')
script.src = './static/config.js'
script.type = 'module'
//必须等config加载完毕再起vue
script.onload = () => {
	const app = new Vue({
		store,
		...App
	})
	app.$mount()
}
document.head.appendChild(script)
//#endif
//APP版本
//#ifdef APP-PLUS
import ServerUrl from '@/static/config.js';
const app = new Vue({
	store,
	...App
})
app.$mount()
//#endif