axios为什么app.vue中只能用const axios = require("axios");

Question

为什么 app.vue 中只能用 const axios = require("axios"); ，使用import axios from "axios"; 会报错，但是我封装的request里面用的 import axios from "axios"; 又没什么问题，而且我 app.vue 里面也有 import 导入的别的！

Answer 1

PBitW 中午好🌞🌞🌞
本答案参考ChatGPT-3.5

在ES6的模块化开发中，使用不同的语法来引入axios可能会导致在不同情况下产生错误。你在app.vue中使用import axios from "axios"报错的原因可能是因为app.vue的文件后缀是.vue，通常在vue单文件组件中，引入模块的方式是使用ES6的import语法。

解决方案：

1. 你可以按照以下方式在app.vue中使用import语法引入axios来避免报错：

<script>
import axios from "axios";

export default {
  name: "App",
  // ...
}
</script>

说明：

• 使用import语法时，需要确保你的项目已经安装了axios模块，可以在命令行中使用npm install或者yarn add命令来安装axios模块。

1. 如果在app.vue中使用import语法仍然报错，你可以尝试将app.vue文件后缀改成.js，然后使用const axios = require("axios")来引入axios模块。这是因为在JS文件中，CommonJS的写法(require和module.exports)可以正常工作，而ES6的模块化语法(import和export)需要webpack等构建工具的支持才能正常运行。

2. 对于你封装的request文件，假设文件名为request.js，使用import axios from "axios"没有问题，这可能是因为request.js是一个单独的JS文件，并不是.vue文件。所以，在单独的JS文件中使用import语法引入axios是没有问题的。

综上所述，根据你的使用场景和项目环境，选择合适的引入方式(import或require)来避免报错。