如何在静态网站中使用没有 CDN 的 Ionic 4 CSS 和 JS？答案

【问题标题】：How to use Ionic 4 CSS and JS without CDN in a static website?如何在静态网站中使用没有 CDN 的 Ionic 4 CSS 和 JS？
【发布时间】：2020-04-17 20:19:50
【问题描述】：

如何在不使用 CDN url 的情况下将 Ionic 4 的 CSS 和 JS 包含在静态网站中？

当我们尝试将 JS 文件下载到本地并将其引用为 <script type='text/javascript' src="ionic.js"></script> 时，页面加载“空”并在 Chrome 开发控制台中出现错误。如果我们从 CDN 引用它，则同样有效。

从https://unpkg.com/@ionic/core@4.0.0/dist/ionic.js下载js文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- <script src="https://unpkg.com/@ionic/core@4.0.0/dist/ionic.js"></script> -->
    <script type='text/javascript' src="ionic.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0/css/ionic.bundle.css">
  </head>
  <body>
    <ion-title>Sample Title</ion-title>
  </body>
</html>

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

谢谢ghybs

ionic.js 依赖于@ionic/core/dist/ionc 下的另外 135 个 js 文件。在我的静态网站项目文件夹中包含整个@ionic/core 文件夹后，带有离子组件的页面正确加载。

这是使用 Ionic 框架构建静态网站的解决方案：

文件夹结构应为：

projectFolder
|_core
|  |_css
|  |  |_ionic.bundle.css
|  |_dist
|    |_ionic (contains all dependent js files) 
|    |_ionic.js
|_index.html

如何获得离子核？

运行以下命令。

$ npm install @ionic/core

这将生成node_modules 文件夹。将文件夹从node_modules/@ionic/core 复制到您的项目中。

index.html

<html lang="en">
<head>
  <script type='text/javascript' src="core/dist/ionic.js"></script>
  <link rel="stylesheet" href="core/css/ionic.bundle.css">
</head>
<body>    
  <ion-title>Sample</ion-title>
</body>

GitHub repo of the above example

【讨论】：

如何用 Webpack 做到这一点？

【解决方案2】：

也许您可以尝试将带有或不带有 Cordoba 的应用程序部署为 Web 应用程序？该结果应该在您的 dist 文件夹中有一个静态网站。

https://forum.ionicframework.com/t/how-to-deploy-for-all-three-platforms-ios-android-and-web-too/100493/2

【讨论】：

【解决方案3】：

ionic 4 和普通 JS 库的不同之处在于 ionic 4 使用延迟加载，因此您的用户不会加载您的应用中未使用的组件。

因此，ionic 4 被拆分为许多不同的 JS 文件。虽然您确实只需要在 HTML 中引用单个条目文件，但 ionic 4 期望其余文件与该条目文件一起可用。这就是为什么您会在开发控制台中看到对具有哈希文件名的离子 JS 资产的额外网络请求。

您可以浏览 https://unpkg.com/@ionic/core@4.0.0/dist/ionic/ 以了解这意味着什么（尽管 ionic 可能只会加载块，而不是单个组件）。

然后入口文件会在页面上看到 ionic 自定义 web 元素时自动尝试加载这些额外的块。

因此，您错过的只是将所有这些额外的 JS 文件放在与您的入口文件相同的位置。

要检索它们，您可以从 GitHub 发布页面、jsdelivr 或 npm 获取已发布资产的 zip。

【讨论】：