时间戳

首页 > 解决方案 > 如何在静态网站中使用没有 CDN 的 Ionic 4 CSS 和 JS？

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

问题描述

如何在不使用 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-frameworkionic4

解决方案

谢谢吉布斯_

ionic.js取决于@ionic/core/dist/ionc. @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到您的项目。

索引.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 存储库

推荐阅读