html中使用import(模块化)

最新推荐文章于 2024-05-06 17:11:44 发布

啊a阿花

最新推荐文章于 2024-05-06 17:11:44 发布

阅读量1.7w

点赞数 8

分类专栏： javascipt 文章标签： javascript 前端 module html

本文为博主原创文章，未经博主允许禁止转载，转载请注明出处！

本文链接：https://blog.csdn.net/aaahuahua/article/details/123720407

版权

javascipt 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

在服务器环境下使用模块化，而不是‘Alt+B’使用文件系统直接在浏览器运行项目

在这里插入图片描述

这种方式会在将你的代码跑在本地服务器上（http://127.0.0.1/）
在这里插入图片描述

如果是直接通过文件系统运行代码，会报错，这是FILE协议导致的跨域问题

from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
在这里插入图片描述
在script标签里加上 type='module’

script标签的默认type属性是"text/javascript"，将其typr设置为module，这样浏览器就会把引入的脚本识别为JS module，注意import的时候必须带上后缀名

示例代码
html部分


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">
   import {a} from './a.js' //引入必须加.js后缀名
   console.log(a) // 1
</script>
    
</body>
</html>