使用JavaScript时如何修复axios is undefined错误？

你通过npm install axios安装了axios，但浏览器代码里找不到这个变量，核心原因是没在代码中正确引入axios，分两种场景给出解决办法：

场景1：直接在HTML中引入JS文件（无打包工具） #

npm安装的axios存放在node_modules目录，但浏览器不会自动识别这个目录，需要手动引入：

• 方法一：使用CDN链接
  在你的HTML文件里，放在自己的JS脚本之前添加这段代码：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

• 方法二：本地引入文件
  从node_modules/axios/dist/目录复制axios.min.js到项目静态资源文件夹（比如js/），再在HTML中引入：

<script src="./js/axios.min.js"></script>
<script src="./你的脚本文件名.js"></script>

场景2：使用Webpack/Vite等打包工具 #

在你的JS文件最顶部添加引入语句：
如果是ES模块规范（比如Vite、现代Webpack）：

import axios from 'axios';

如果是CommonJS模块规范（比如旧版Webpack）：

const axios = require('axios');

另外提个小细节：你代码里document.getElementById("Spell name")用了带空格的ID，虽然语法允许，但建议改成驼峰式命名（比如spellNameInput），减少后续潜在问题。

内容的提问来源于stack exchange，提问作者Jacob