js importmap

奶昔不会射手

于 2024-02-14 22:06:02 发布

阅读量541

点赞数 7

文章标签： javascript

本文链接：https://blog.csdn.net/lth002/article/details/136116427

版权

在html文件中使用npm 下载的包，比如vue，在使用import引入的时候会报错

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script type="module">
    import { createApp } from "vue";
    console.log(createApp());
  </script>
</html>

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
因为在浏览器环境中必须使用/,./或者../来表示路径的，在平时项目开发中都是使用的webpack或者vite来进行开发，他们都是基于node.js环境的，我们就想这样使用咋办？这时候就需要使用importmap了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script type="importmap">
    {

        "imports":{
            "vue":"./node_modules/vue/dist/vue.esm-browser.js"
        }
    }
  </script>
  <script type="module">
    import { createApp } from "vue";
    console.log(createApp());
  </script>
</html>

这样就能正常引入包了，这里的vue可以随便取名，abc也行，只要下面引入的名字和这里对应起来就行了

奶昔不会射手

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
js importmap

这样就能正常引入包了，这里的vue可以随便取名，abc也行，只要下面引入的名字和这里对应起来就行了。在html文件中使用npm 下载的包，比如vue，在使用import引入的时候会报错。环境的，我们就想这样使用咋办？这时候就需要使用importmap了。来表示路径的，在平时项目开发中都是使用的。来进行开发，他们都是基于。
复制链接

扫一扫