无法使用Node.js模块包？Axios导入报错问题求助

浏览器原生ES模块不支持直接使用import axios from 'axios'这类“裸模块名”，必须用相对路径、绝对路径或完整URL；而你用../../../node_modules/axios访问失败，是因为Django服务器未将node_modules目录设为静态资源可访问路径，导致请求返回404。

方案1：CDN直接导入（最快解决） #

在sendAxios.js里直接从CDN导入axios模块：

import axios from 'https://cdn.jsdelivr.net/npm/axios@latest/dist/axios.min.js';

浏览器会直接从CDN加载axios，无需处理本地文件路径问题。

或者在HTML中先引入axios的模块版本，再加载你的脚本：

<script type="module" src="https://cdn.jsdelivr.net/npm/axios@latest/dist/axios.min.js"></script>
<script type="module" src="{% static 'admin_panel/assets/js/sendAxios.js' %}"></script>

此时你的sendAxios.js可直接使用全局的axios对象（推荐用import方式更规范）。

方案2：打包代码（适合生产环境） #

通过打包工具将axios与你的代码合并，避免模块路径问题：

1. 项目目录下初始化npm：

npm init -y

2. 安装依赖与打包工具：

npm install axios rollup @rollup/plugin-node-resolve --save-dev

3. 创建rollup.config.js配置文件：

import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'admin_panel/assets/js/sendAxios.js',
  output: {
    file: 'admin_panel/assets/js/sendAxios.bundle.js',
    format: 'esm'
  },
  plugins: [resolve()]
};

4. 执行打包：

npx rollup -c

5. HTML中引入打包后的文件：

<script type="module" src="{% static 'admin_panel/assets/js/sendAxios.bundle.js' %}"></script>

打包后axios会被整合到脚本中，无需手动处理导入路径。

方案3：配置Django访问node_modules（仅临时测试用） #

修改settings.py，将node_modules添加到静态资源目录：

STATICFILES_DIRS = [
    BASE_DIR / "static",
    BASE_DIR / "node_modules",  # 添加此行
]

然后在sendAxios.js中指向axios的实际入口文件：

import axios from '../../../../node_modules/axios/dist/axios.min.js';

注意：此方法会暴露整个node_modules目录到静态资源，体积大且存在安全风险，仅适合临时测试，生产环境禁止使用。

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