Question

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

当我们尝试将JS文件下载到本地并将其命名为<script type='text/javascript' src="ionic.js"></script>时，页面会在Chrome开发者控制台中加载“ Empty”并显示错误。如果我们从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>

Answer 1

感谢ghybs

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

以下是使用Ionic Framework构建静态网站的解决方案：

文件夹结构应为：

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

Answer 2

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

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

Answer 3

ionic 4和普通JS库之间的区别是ionic 4使用延迟加载，因此您的用户不会加载应用程序中未使用的组件。

因此，ionic 4被拆分为许多不同的JS文件。的确，您只需要在HTML中引用单个条目文件，而ionic 4希望其余文件与该条目文件一起提供。因此，您会在开发人员控制台中看到对带有哈希文件名的离子JS资产的额外网络请求。

您可以浏览https://unpkg.com/@ionic/core@4.0.0/dist/ionic/来了解其含义（尽管离子可能仅加载块，而不加载单个组件）。

然后，只要入口文件在页面上看到离子自定义Web元素，它将自动尝试加载这些额外的块。

因此，您错过的只是在入口文件所在的位置提供所有这些额外的JS文件。

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

如何在静态网站中使用不带CDN的Ionic 4 CSS和JS？

3 个答案: