美文网首页
Vue组件中引入外部的js文件

Vue组件中引入外部的js文件

作者: 依然_8deb | 来源:发表于2022-09-14 12:49 被阅读0次

    方法一:直接在Vue项目的index.html 中使用全局的方式引入,js文件放public;
    <script src="../xxx.js"></script> // 暴力引入
    缺点:不使用该js插件的组件也会加载。
    方法二:使用import 的方式导入

    import { xxx } from '../js/xxx.js' //注意路径
    

    缺点:下载的本地静态文件才可以,远程js文件不可以。
    方法三:在Vue组件加载完后,手动操作DOM插入js插件

    mounted() {
            let script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = '你的js文件地址';
            document.body.appendChild(script);
        }
    

    方法四:使用render

    export default {
        components: {
            'xxx-js': {
                render(createElement) {
                    return createElement(
                        'script',
                        {
                            attrs: {
                                type: 'text/javascript',
                                src: '你的js文件地址',
                            },
                        },
                    );
                },
            },
        },
    }
    // 使用 <xxx-js></xxx-js> 在页面中调用
    

    相关文章

      网友评论

          本文标题:Vue组件中引入外部的js文件

          本文链接:https://www.haomeiwen.com/subject/vcirortx.html