为什么浏览器环境的 js 无法调用 node_module 下的 axios 库
rookiemaster · 2024-05-30 21:03:28 +08:00 · 2451 次点击这是一个创建于 434 天前的主题，其中的信息可能已经有所发展或是发生改变。
项目目录
--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 "../".
搞不懂...
15 条回复 • 2024-06-07 23:10:25 +08:00
 |
1
rookiemaster OP  1
为什么写 vue 的时候在 script 标签里写 import axios from "axios";就可以，是构建工具实现的吗
|
 |
2
ysc3839 2024-05-30 21:11:16 +08:00 via Android 1
是构建工具实现的
|
 |
3
Kokororin 2024-05-30 21:13:16 +08:00
提示已经告诉你了，改成这样就可以了：import axios from "/node_modules/axios/dist/esm/axios.js"
|
|
4
rookiemaster OP @Kokororin 不行，又提示 axios 依赖的库的导入有问题
|
 |
5
vituralfuture 2024-05-30 21:17:11 +08:00 via Android
看看 webpack 的文档
|
|
6
Kokororin 2024-05-30 21:19:29 +08:00
@rookiemaster 看下路径是否是对的，协议是否是 http://而不是 file:///
|
|
7
ysc3839 2024-05-30 21:20:43 +08:00 via Android
你想在自己的项目里自己写，用 Vite 就行了。Webpack 也行，不过个人更推荐 Vite ，整体复杂度没那么高。
|
 |
8
lisongeee 2024-05-30 21:31:32 +08:00
|
 |
9
DOLLOR 2024-05-30 21:41:36 +08:00
@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 |
 |
10
NessajCN 2024-05-30 21:48:10 +08:00
node_modules 在你服务器上
用户的浏览器怎么能导入你服务器上的模块呢 vue 是把相关的脚本都打包给了浏览器才能做到让浏览器能导入模块的呀 所以你要达到类似的目的，就必须把你 node_modules 里的脚本让用户浏览器能看到才行 譬如放到 index.html 同级目录下，保证远程用 http://youserver/axios.js 能看到脚本， 然后在 index.html 内 <script src="axios.js" type="module" /> 这样才能在让浏览器可以正常用 axios 模块 |
 |
11
iOCZS 2024-05-30 22:03:38 +08:00
这是 webpack 等打包工具的功能啦，
你可以选择在 HTML 里引入远程地址，也可以将三方代码全写入一个 vendor 文件，然后再引入 HTML 中。 甚至可以是异步的，通过 js 动态插入 script 块。 |
 |
12
beginor 2024-05-31 07:06:28 +08:00 via Android
可以配置一个 [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 |
 |
13
TimPeake 2024-05-31 11:55:59 +08:00
又一个萌新，来人，叉出去
 |
 |
14
hwf 2024-05-31 15:30:48 +08:00
基础基础还是 xxx 基础
|
 |
15
skkakaka2 2024-06-07 23:10:25 +08:00
首先，你想引入一个文件肯定要有相对路径或者绝对路径的，你直接 from 'axios'浏览器怎么可能识别，你可以用相对路径引用试一下，vite 或者 webpack 是会自动索引 nodemodules 里面的模块来一起打包的
|
Select Language