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

方法一:直接在Vue项目的index.html 中使用全局的方式引入,js文件放public;
// 暴力引入
缺点:不使用该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文件地址',
                        },
                    },
                );
            },
        },
    },
}
// 使用  在页面中调用

你可能感兴趣的:(Vue组件中引入外部的js文件)