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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

项目目录
--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

rookiemaster

19 天前

为什么写 vue 的时候在 script 标签里写 import axios from "axios";就可以，是构建工具实现的吗

ysc3839

19 天前 via Android

是构建工具实现的

Kokororin

19 天前

提示已经告诉你了，改成这样就可以了：import axios from "/node_modules/axios/dist/esm/axios.js"

rookiemaster

19 天前

@Kokororin 不行，又提示 axios 依赖的库的导入有问题

vituralfuture

19 天前 via Android

看看 webpack 的文档

Kokororin

19 天前

@rookiemaster 看下路径是否是对的，协议是否是 http://而不是 file:///

ysc3839

19 天前 via Android

你想在自己的项目里自己写，用 Vite 就行了。Webpack 也行，不过个人更推荐 Vite ，整体复杂度没那么高。

lisongeee

19 天前

直接将 main.js 改成

import axios from 'https://cdn.jsdelivr.net/npm/axios/dist/esm/axios.min.js'

DOLLOR

19 天前

@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

18 天前

node_modules 在你服务器上
用户的浏览器怎么能导入你服务器上的模块呢
vue 是把相关的脚本都打包给了浏览器才能做到让浏览器能导入模块的呀
所以你要达到类似的目的，就必须把你 node_modules 里的脚本让用户浏览器能看到才行
譬如放到 index.html 同级目录下，保证远程用 http://youserver/axios.js 能看到脚本，
然后在 index.html 内 <script src="axios.js" type="module" />
这样才能在让浏览器可以正常用 axios 模块