Vue3+TSX项目动态导入js文件,挂载到window全局作用域中

历史小剧场

国家外患,振古有闻。赵宋末造,代于蒙古,神州陆沈,几及百年。我高皇帝,应时崛起,廓清中土,日月重明,河山再造,光复大义,昭示来兹。不幸季世俶扰,国力罢疲,满清乘间,入据中夏。嗟我邦人,诸父兄弟,迭起迭踣,至于二百六十有八年。呜呼!我高皇帝,时怨时恫,亦二百六十有八年也。岁在辛亥八月,武汉军兴,建立民国。义声所播,天下响应,越八十有七日,既光复十有七省,国民公议,立临时政府于南京。文以薄德,被推为临时大总统,瞻顾西北,未尽昭苏,负疚在躬,尚无以对我高皇帝在天之灵。迩者以全国军人之同心,士大夫之正谊,卒使清室幡然悔悟,于本月十二日宣告退位。从此中华民国完全统一,邦人诸友享自由之幸福,永永无已,实维我高皇帝光复大义,有以牖启后人,成兹鸿业。文与全国同胞至于今日,始敢告无罪于我高皇帝。敬于文奉身引退之前,代表国民,贡其欢欣鼓舞之公意,惟我高皇帝实鉴临之。敬告。-------孙中山《祭明孝陵文》

前言

最近,在一个需求中,我们这边需要和第三方厂商对接,第三方给了我方一个js文件,需要我方这边调用该文件中的某一个方法进行数据交互,但是我们这边使用的是Vue3+TS的项目。在最开始,我把JS文件转成了TS,然后将需要调用的文件export出去,然后我在TSX业务组件中去import,然后再进行调用,但是出现了一点问题。且第三方这个有很多问题,然后一下改这改那,我这边也比较繁琐。然后我就不转了,直接讲js文件挂载到window全局作用域中。但是,这里需要注意作用域的概念,为了避免这个js文件中的一些方法可能与我整个项目中一些全局变量所冲突,所以,我用了一个匿名函数将整个js文件中的内容包裹起来,然后将需要调用的方法return出去。

修改js文件放到项目静态文件目录下 assets

js 复制代码
window.$hlyy = function () {
	.... 原来的js文件中的内容
	return {
		PharmacistCheck.  // 业务组件需要调用的方法
	}
}

在业务组件中setup()函数中动态导入

js 复制代码
export default defineComponent({
	setup() {
		import("@/assets/js/hlyy3.js" as string);
	}
})

在浏览器环境中验证

相关推荐
时光の尘3 分钟前
C语言菜鸟入门·关键字·float以及double的用法
运维·服务器·c语言·开发语言·stm32·单片机·c
以后不吃煲仔饭16 分钟前
Java基础夯实——2.7 线程上下文切换
java·开发语言
进阶的架构师17 分钟前
2024年Java面试题及答案整理(1000+面试题附答案解析)
java·开发语言
前端拾光者21 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
程序猿阿伟23 分钟前
《C++ 实现区块链:区块时间戳的存储与验证机制解析》
开发语言·c++·区块链
Json_1817901448039 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
傻啦嘿哟41 分钟前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光1 小时前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用1 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网