Vue

Vite构建的Vue项目引入外部js的相关问题

08-11 15:50

1、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>


微信小程序
大潇博客 版权所有 Copyright ©2016~2026
京ICP备17004217号-6  合作QQ:284710375
天玺科技