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);
	}
})

在浏览器环境中验证

相关推荐
papership1 小时前
【入门级-C++程序设计:12、文件及基本读写-文件的基本概念&文本文件的基本操作】
开发语言·c++·青少年编程
SaleCoder2 小时前
用Python构建机器学习模型预测股票趋势:从数据到部署的实战指南
开发语言·python·机器学习·python股票预测·lstm股票模型·机器学习股票趋势
wkj0013 小时前
vue中 js-cookie 用法
前端·javascript·vue.js
GoldKey7 小时前
gcc 源码阅读---语法树
linux·前端·windows
玩代码7 小时前
备忘录设计模式
java·开发语言·设计模式·备忘录设计模式
Xf3n1an8 小时前
html语法
前端·html
张拭心8 小时前
亚马逊 AI IDE Kiro “狙击”Cursor?实测心得
前端·ai编程
漠月瑾-西安8 小时前
如何在 React + TypeScript 中实现 JSON 格式化功能
javascript·jst实现json格式化
技术猿188702783518 小时前
实现“micro 关键字搜索全覆盖商品”并通过 API 接口提供实时数据(一个方法)
开发语言·网络·python·深度学习·测试工具
烛阴8 小时前
为什么你的Python项目总是混乱?层级包构建全解析
前端·python