加载HTML页面提示axios未定义、无法在模块外使用import语句如何解决

解决方案 #

1 优先排查脚本加载顺序（90%以上都是这个问题）

浏览器按从上到下的顺序加载执行脚本，必须保证axios的CDN引入节点，放在你自己的业务脚本（index.js）的引入节点之前，正确格式示例：

<!-- 第一步先引入axios CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.23.0/axios.js"></script>
<!-- 第二步再引入自己的业务脚本 -->
<script src="./index.js"></script>

如果顺序反了，你调用axios时对应的资源还没加载完成，必然会报axios is not defined错误。

2 验证CDN资源加载状态

打开浏览器开发者工具的「网络」面板，刷新页面后查看axios对应的CDN资源是否加载成功，若出现404、跨域拦截等异常，可更换更高版本的axios CDN地址重试。

3 关于import语法报错的处理

普通脚本默认不支持ES6的import语法，如果你想通过npm安装的axios走引入方式，需要做两个修改：

• 给业务脚本的script标签添加type="module"属性：

  <script type="module" src="./index.js"></script>
  

• 不要直接用file协议打开本地HTML文件，需通过本地静态服务（比如VS Code的Live Server插件、vite等）启动页面，避免出现ES模块跨域限制。

4 兜底测试方法

你可以先把测试代码直接内联在axios CDN节点之后，验证axios是否能正常调用：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 控制台能正常打印axios对象即说明加载正常
console.log(axios)
// 测试接口调用
axios.get('http://localhost:8000/api/getList').then(res => console.log(res))
</script>

如果该测试运行正常，即可确认问题出在脚本加载顺序或模块属性配置上，对应调整即可。

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