方法一：异步加载第三方库
在我们的vue工程中新建如下路径：src/utils/index.js，在index.js中实现如下方法：
export function loadScript(url) { let isLoaded = false; return new Promise((resolve,reject) => { if(isLoaded) { resolve(); true; } let script = document.createElement('script'); script.type = 'text/javascript'; script.charset = 'utf-8'; script.async = ; script.src = url; script.onerror = reject; script.onload = () { isLoaded = ; resolve(); } document.head.appendChild(script); }) }
我们在static下面创建一个lib.js文件存放普通的方法：
sum(a,b) { return a + b; }
那么我们在某一个vue页面引入这个loadScript，在lib.js加载完成后再执行后续的操作，如下vue页面代码：
<template> div> 其他组件内容 </> > script> import {loadScript} from '@/utils/index.js; export default { data() { return { } },created() { loadScript(./static/lib.js).then(() => { console.log(sum(2,3)) }) },methods: { } } style>
当然也可以使用插件来实现。
- vue框架使用：vue-plugin-load-script
- react框架使用：react-load-script
方式二：index.html静态模板script标签引入
script type="text/javascript" src="./static/lib.js"></>
原文链接：/vue/994296.html
