Vue
Vite构建的Vue项目引入外部js的相关问题
08-11 15:501、Vue 项目引入外部 js 的方式
在 Vue 项目中引入外部 js,如果仅引入 js,之后不做其它操作,直接且简单的方式,就是在 index.html 中引入即可,比如:

2、使用引入公共js文件中的方法
如果引入外部 js 后,还要在 vue 文件中用到外部 js 的某些方法,那么可以通过 window 实现,具体实现方法如下:
⑴ 创建引入的 js 文件
假设引入的 xxx.js,其中有个名字为 _M 的大对象,它的内部提供了 getS() 方法:

⑵ 渲染调用公共js方法
首先在入口的 vue 文件中(比如:App.vue),添加 入下代码:

下面代码可复制:
import { onMounted, nextTick } from 'vue'
//在 DOM 渲染完成后调用公共 JS 的方法
onMounted(() => {
//nextTick 确保子组件也渲染完成
nextTick(() => {
if (window._M && typeof window._M.repairUrl === 'function') {
window._M.repairUrl()
}
})
})
通过上面的代码,运行时即可加载到 xxx.js 中的方法。
⑶ 使用引入js文件内的方法
如果要在其它的 vue 文件的 script 中,使用引入的 _M.getS() 方法,如下:
<script>
const channel = window._M?.getS?.() || '' //调用引入的_M.getS() 方法
</script>
微信小程序