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

历史小剧场

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

前言

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

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

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

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

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

在浏览器环境中验证