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

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

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

【问题讨论】：

标签： php laravel vue.js vue-component vue-router

【解决方案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');
    }

}

`externlJS.js`解释

如果要从特定组件中删除脚本，则调用函数del_script()
如果要在<head>标签中添加脚本（JS文件），则调用函数head_script()
如果要在<body>标签中添加脚本，则调用函数body_script()
如果要添加css文件，则调用函数body_link()
如果要在<body>标签中添加css样式，则调用函数body_script()
如果要从特定组件中删除css stlye，请调用函数del_link()

希望对你有所帮助:)

【讨论】：

感谢您的帮助，我按照您说的做了，解决方案奏效了。非常感谢
@0xHttrackers 我也遇到了同样的问题，你是怎么调用这些函数的？
@RamearDo如何添加这些功能？

externlJS.js解释

`externlJS.js`解释