Question

我想将我的Aurelia应用程序嵌入到我的Spring Boot应用程序的resources文件夹中，并手动启动/增强页面。 Aurelia捆绑包由aurelia-cli生成。在文档http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/4中是JSPM和webpack骨架的示例。如何使用aurelia-cli实现手动启动/渐进增强？

我的main.js应该怎么样？我应该在哪里包含我的app-bundle.js和vendor-bundle.js？

修改我通过包含这样的内容实现了一个工作示例：

<div aurelia-app="main">
 <script data-main="aurelia-bootstrapper" src="path-to-resources/vendor-bundle.js" type="text/javascript"></script>
 <script src="path-to-resources/app-bundle.js" type="text/javascript"></script>
</div>

但是可以在<head>中包含脚本并增强DOMContentLoaded事件上的<div aurelia-app="main">吗？

Answer 1

我手动启动了这样的aurelia-cli应用程序。在这里，我通过第一个脚本标签使用polyfill服务。此脚本运行并下载浏览器缺少的polyfill。之后它调用一个回调函数。此回调函数添加了aurelia vendor-bundle脚本。

<body aurelia-app="main" class="sharry not-selectable no-tap-highlight-color">
<div class="app-loding-container">
    <img src="/img/logo/sharry_tv_b.png" alt="sharry logo">
</div>
<script src="https://polyfill.io/v2/polyfill.min.js?features=HTMLPictureElement,Intl&callback=polyfillsAreLoaded" defer async></script>
<script>
    function polyfillsAreLoaded() {
        var aureliaScript = document.createElement('script');
        aureliaScript.setAttribute('src', '/scripts/vendor-bundle.js');
        aureliaScript.setAttribute('data-main', 'aurelia-bootstrapper');
        document.body.appendChild(aureliaScript);
    }
</script>

使用aurelia-cli手动引导aurelia应用程序

1 个答案: