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

在浏览器环境中验证

相关推荐
捕鲸叉21 分钟前
创建线程时传递参数给线程
开发语言·c++·算法
Devil枫22 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
A charmer25 分钟前
【C++】vector 类深度解析:探索动态数组的奥秘
开发语言·c++·算法
Peter_chq28 分钟前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端
Yaml41 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子1 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
记录成长java2 小时前
ServletContext,Cookie,HttpSession的使用
java·开发语言·servlet
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
睡觉谁叫~~~2 小时前
一文解秘Rust如何与Java互操作
java·开发语言·后端·rust