How to use Ionic 4 CSS and JS without CDN in a static website?

问题

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

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

回答1:

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

回答2:

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

回答3:

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.

来源：https://stackoverflow.com/questions/54425420/how-to-use-ionic-4-css-and-js-without-cdn-in-a-static-website

标签

ionic-framework

ionic4