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

方法一:直接在Vue項目的index.html 中使用全局的方式引入,js文件放public;
<script src="../xxx.js"></script> // 暴力引入
缺點:不使用該js插件的組件也會加載。
方法二:使用import 的方式導(dǎo)入

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

缺點:下載的本地靜態(tài)文件才可以,遠(yuǎn)程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> 在頁面中調(diào)用
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容