layui報錯 "Layui hint: 模塊名 xxx 已被占用" 的問題解決方案

由於擴展模塊數量眾多, 於是我需要將擴展模塊分類到二級文件夾中, 我在頁面中是這么寫的

<script>
    layui.extend({
        courseTask: 'task/courseTask'
    });
    layui.use('courseTask', layui.factory('courseTask'));
</script>

然而首次進入頁面時, 頁面可以正常運行, 但是從菜單欄切換之后在到這個頁面時, 就報錯了

並且頁面無法渲染

 

問題病因:

由於我們的項目的單頁面應用, 所以 每次進入這個頁面時就會運行一次 

layui.extend({
   courseTask: 'task/courseTask' });

這也是導致模塊名重復注冊的根源

 

問題解決:

將 extend 配置放入主入口文件內, 這樣就不會出現多次加載的問題了

頁面中引用

<script>
    layui.use('courseTask', layui.factory('courseTask'));
</script>

 

問題解決!