How to use Ionic 4 CSS and JS without CDN in a sta

2020-07-16 04:20发布

站内问答 / 移动开发
1333 3 6

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

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.

Downloaded the js file from https://unpkg.com/@ionic/core@4.0.0/dist/ionic.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>

3条回答
淡お忘
2楼-- · 2020-07-16 04:36

What is different between ionic 4 and common JS libraries is that ionic 4 uses lazy loading so that your user does not load components that are not used in your app.

As a consequence, ionic 4 is split in many different JS files. While it is true you only need to reference a single entry file in your HTML, ionic 4 expects the rest of the files to be available alongside this entry file. That is why you see in your dev console an extra network request to an ionic JS asset with hash file name.

You can browse https://unpkg.com/@ionic/core@4.0.0/dist/ionic/ to get an idea of what that means (although ionic will probably load only the chunks, not the individual components).

Then the entry file will automatically try loading these extra chunks whenever it sees ionic custom web elements on the page.

Therefore what you miss is simply to make available all these extra JS files at the same location as your entry file.

As to retrieve them, you can get a zip of released assets on the GitHub release page, from jsdelivr, or from npm.

查看更多
0人赞 添加讨论(0) 举报
叛逆
3楼-- · 2020-07-16 04:44

Maybe you could try deploying the App with or without Cordoba as Webapp? That result should ne a static website in your dist folder.

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

查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
4楼-- · 2020-07-16 04:49

Thanks ghybs

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.

Here's the solution to build static websites using Ionic Framework:

Folder structure should be:

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

How to get ionic core?

Run the below command.

$ npm install @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 repo of the above example

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)