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

查看 97|回复 10
作者:rookiemaster   
项目目录
--my_app
----node_modules
------axios
----index.html
----main.js
index.html 代码:
   
    Title
   


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 "../".
搞不懂...
rookiemaster
OP
  
为什么写 vue 的时候在 script 标签里写 import axios from "axios";就可以,是构建工具实现的吗
ysc3839   
是构建工具实现的
Kokororin   
提示已经告诉你了,改成这样就可以了:import axios from "/node_modules/axios/dist/esm/axios.js"
rookiemaster
OP
  
@Kokororin 不行,又提示 axios 依赖的库的导入有问题
vituralfuture   
看看 webpack 的文档
Kokororin   
@rookiemaster 看下路径是否是对的,协议是否是 http://而不是 file:///
ysc3839   
你想在自己的项目里自己写,用 Vite 就行了。Webpack 也行,不过个人更推荐 Vite ,整体复杂度没那么高。
lisongeee   
直接将 main.js 改成
import axios from 'https://cdn.jsdelivr.net/npm/axios/dist/esm/axios.min.js'
DOLLOR   
@rookiemaster
是的,没错。
vite 会自动帮你把 import axios from "axios"转化为浏览器可识别的地址。
如果你不用预构建工具,你就要自己写 importmap 。
比如

参见
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap
您需要登录后才可以回帖 登录 | 立即注册

返回顶部