javascript - 浏览器没有从 html 页面加载我的 java-script 文件
问题描述
我是我们设计的新手,我从 github 下载了一个包含完整源代码的网站,当我打开我的 index.html 时,它没有在其中加载 .js 文件。请帮助我,我只是使用打开 index.html 文件铬和火狐
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>SHOP</title>
<meta name="description" content="Polymer Shop Demo">
<link rel="shortcut icon" sizes="32x32" href="images/shop-icon-32.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Polymer">
<meta property="og:type" content="website">
<meta property="og:site_name" content="SHOP">
<meta name="theme-color" content="#fff">
<link rel="manifest" href="manifest.json">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
font-size: 13px;
line-height: 1.5;
min-height: 100vh;
}
/* styling for render while resources are loading */
shop-app[unresolved] {
display: block;
min-height: 101vh;
line-height: 68px;
text-align: center;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.3em;
color: #202020;
padding: 0 16px;
overflow: visible;
}
</style>
</head>
<body>
<shop-app unresolved>SHOP</shop-app>
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="src/shop-app.js"></script>
<script>
window.performance && performance.mark && performance.mark('index.html');
</script>
</body>
</html>
解决方案
看起来好像您需要该webcomponents-loader.js
文件。如果你不是用 node.js 做的(你可以在这里学习),你需要自己找到那个文件,或者安装 node.js。
以下说明不会帮助您了解其工作原理。我强烈建议您在按照这些说明操作之前观看上面的视频链接以了解 node.js。
如果您的计算机上有一个包含 HTML 和 JS 文件(以及计算机上的 node.js)的文件夹,您可以在计算机上打开一个终端,导航到终端中的该文件夹(cd folder_name 等...),然后运行npm init
或sudo npm init
,无论哪个有效。
然后要获取该文件,您将需要运行npm i webcomponents.js
以安装webcomponents.js
. 然后,如果您在代码编辑器中打开包含 HTML 和 JS 文件的文件夹,您应该能够看到一个名为 node_modules 的文件夹。
在该文件夹中,您可以找到webcomponentsjs
,在该文件夹下,有webcomponents-loader.js
. 您可以复制该文件并将其粘贴到主 JavaScript 文件所在的位置。然后将脚本代码更改为<script src="src/webcomponents-loader.js"></script>
推荐阅读
- javascript - 如何在 React Navbar 中显示变量?
- php - 如何在 WooCommerce 的特定位置添加自定义结帐字段
- c++ - 如何使用 C++/WinRT + WinUI 3 以编程方式设置 TextBlock 属性
- django - Django中的条件分页数
- gevent - 如何使 grpc 猴子补丁代码仅打开 v4 套接字。它默认打开一个 v6 套接字
- django - Django:在表单实例中传递作者帖子以创建聊天
- javascript - 生成数组的所有唯一组合的最佳方法?
- python - 循环遍历数组
- c - pthread_cancel 之后的 pthread_join 有必要吗?
- javascript - 无法准备好未定义的“0”属性 - 从数组对象中提取数据