Laravel & Vuejs 资源[CSS & JS] 编译问题

Posted 2023-02-22

技术标签:

【中文标题】Laravel & Vuejs 资源[CSS & JS] 编译问题【英文标题】：Laravel & Vuejs resources[CSS & JS] compilation problem 【发布时间】：2021-04-21 01:25:35 【问题描述】：

我正在使用 laravel 和 vue 为我的项目使用自定义管理模板。有很多 css 和 js 文件，我已将它们包含在我的 master.blade.php 文件中。因此，每当我刷新页面（例如，仪表板页面）时，数据表之类的插件，select2 就可以工作，但是当我转到下一页/组件并返回相同的仪表板页面时。插件效果消失了。 Select2，数据表根本不起作用。有人可以帮我解决这个自定义模板资源编译的想法吗？？？？谢谢。

【问题讨论】：

【参考方案1】：

好的，我有你的问题。在我看来，您正在尝试将模板与项目集成:)

在/resources/js/ 中创建新文件externalJS.js 并粘贴以下代码

function head_script(src) 
    if(document.querySelector("script[src='" + src + "']")) return; 
    let script = document.createElement('script');
    script.setAttribute('src', src);
    script.setAttribute('type', 'text/javascript');
    document.head.appendChild(script)


function body_script(src) 
    if(document.querySelector("script[src='" + src + "']")) return; 
    let script = document.createElement('script');
    script.setAttribute('src', src);
    script.setAttribute('type', 'text/javascript');
    document.body.appendChild(script)


function del_script(src) 
    let el = document.querySelector("script[src='" + src + "']");
    if(el) el.remove(); 



function head_link(href) 
    if(document.querySelector("link[href='" + href + "']")) return; 
    let link = document.createElement('link');
    link.setAttribute('href', href);
    link.setAttribute('rel', "stylesheet");
    link.setAttribute('type', "text/css");
    document.head.appendChild(link)


function body_link(href) 
    if(document.querySelector("link[href='" + href + "']")) return; 
    let link = document.createElement('link');
    link.setAttribute('href', href);
    link.setAttribute('rel', "stylesheet");
    link.setAttribute('type', "text/css");
    document.body.appendChild(link)


function del_link(href) 
    let el = document.querySelector("link[href='" + href + "']");
    if(el) el.remove(); 


export 
    head_script,
    body_script,
    del_script,
    head_link,
    body_link,
    del_link,

然后在您的App.vue 或app.js 中粘贴此

import * as external from '../externalJS.js';

export default 


    mounted()
    
        external.body_script('/path/to/your.js');
        external.head_link('/path/to/style.css');
    

    destroyed()
    
        external.del_link('/path/to/your.js');
        external.del_link('/path/to/style.css');