如何在静态网站中使用不带CDN的Ionic 4 CSS和JS? [英] How to use Ionic 4 CSS and JS without CDN in a static website?

查看:90
本文介绍了如何在静态网站中使用不带CDN的Ionic 4 CSS和JS?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

How to include Ionic 4's CSS and JS in a static website without using CDN url’s?

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

When we tried to download the JS file to local and refer it as <script type='text/javascript' src="ionic.js"></script> , the page loads "Empty" with an error in Chrome dev console. The same works if we refer it from CDN.

https://unpkg.com/下载了js文件@ ionic/core @ 4.0.0/dist/ionic.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>

推荐答案

感谢 ghybs

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

ionic.js depends on about another 135 js files under @ionic/core/dist/ionc. After including the entire @ionic/core folder in my static website project folder, the pages with ion components loaded properly.

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

Here's the solution to build static websites using 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复制到您的项目.

This will generate node_modules folder. Copy the folder from node_modules/@ionic/core to your project.

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存储库

这篇关于如何在静态网站中使用不带CDN的Ionic 4 CSS和JS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆