gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 18:19:06 25 4
gpt4 key购买 nike

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

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

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

enter image description here

<!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>

最佳答案

感谢 ghybs
ionic.js取决于 @ionic/core/dist/ionc 下的另外 135 个 js 文件.包括整个@ionic/core之后我的静态网站项目文件夹中的文件夹,正确加载了 ionic 组件的页面。

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

文件夹结构应该是:

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

如何获得 ionic 核?

运行以下命令。
$ 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

关于ionic-framework - 如何在静态网站中使用没有 CDN 的 Ionic 4 CSS 和 JS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54425420/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com