问题描述
如何在不使用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/[email protected]/dist/ionic.js"></script> -->
<script type='text/javascript' src="ionic.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@ionic/[email protected]/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>
这篇关于如何在静态网站中使用不带CDN的Ionic 4 CSS和JS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！