为什么浏览器环境的 js 无法调用 node_module 下的 axios 库

27 天前
 rookiemaster

项目目录
--my_app
----node_modules
------axios
----index.html
----main.js

index.html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="main.js" type="module"></script>
</head>
<body>

</body>
</html>

main.js 代码：

import axios from "axios";

axios.get('http://localhost:5173/')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

浏览器 console 报错：

TypeError: Failed to resolve module specifier "axios". Relative references must start with either "/", "./", or "../".

搞不懂...

1586 次点击
所在节点    Node.js
15 条回复
rookiemaster
27 天前
为什么写 vue 的时候在 script 标签里写 import axios from "axios";就可以，是构建工具实现的吗
ysc3839
27 天前
是构建工具实现的
Kokororin
27 天前
提示已经告诉你了，改成这样就可以了：import axios from "/node_modules/axios/dist/esm/axios.js"
rookiemaster
27 天前
@Kokororin 不行，又提示 axios 依赖的库的导入有问题
vituralfuture
27 天前
看看 webpack 的文档
Kokororin
27 天前
@rookiemaster 看下路径是否是对的，协议是否是 http://而不是 file:///
ysc3839
27 天前
你想在自己的项目里自己写，用 Vite 就行了。Webpack 也行，不过个人更推荐 Vite ，整体复杂度没那么高。
lisongeee
27 天前
直接将 main.js 改成

import axios from 'https://cdn.jsdelivr.net/npm/axios/dist/esm/axios.min.js'
DOLLOR
27 天前
@rookiemaster
是的，没错。
vite 会自动帮你把 import axios from "axios"转化为浏览器可识别的地址。
如果你不用预构建工具，你就要自己写 importmap 。
比如
<script type="importmap">
{
"imports": {
"axios": "/node_modules/axios/dist/esm/axios.js"
}
}
</script>

参见
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap
NessajCN
27 天前
node_modules 在你服务器上
用户的浏览器怎么能导入你服务器上的模块呢
vue 是把相关的脚本都打包给了浏览器才能做到让浏览器能导入模块的呀
所以你要达到类似的目的，就必须把你 node_modules 里的脚本让用户浏览器能看到才行
譬如放到 index.html 同级目录下，保证远程用 http://youserver/axios.js 能看到脚本，
然后在 index.html 内 <script src="axios.js" type="module" />
这样才能在让浏览器可以正常用 axios 模块
iOCZS
27 天前
这是 webpack 等打包工具的功能啦，
你可以选择在 HTML 里引入远程地址，也可以将三方代码全写入一个 vendor 文件，然后再引入 HTML 中。
甚至可以是异步的，通过 js 动态插入 script 块。
beginor
26 天前
可以配置一个 [importmap]( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) ，让浏览器知道你所需要的第三方库在哪里。

顺便晒一篇我的笔记 https://beginor.github.io/2021/08/16/using-es-modules-in-borwser-with-importmaps.html
TimPeake
26 天前
又一个萌新，来人，叉出去
hwf
26 天前
基础基础还是 xxx 基础
skkakaka2
19 天前
首先，你想引入一个文件肯定要有相对路径或者绝对路径的，你直接 from 'axios'浏览器怎么可能识别，你可以用相对路径引用试一下，vite 或者 webpack 是会自动索引 nodemodules 里面的模块来一起打包的

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1045506

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX