Vue.js 导入axios会导致vue v3和vite出现问题

从“axios”导入axios

投掷维生素的结果

未捕获的语法错误：未找到导入：默认值

示例代码

从“vue”导入{createApp}；
从“./components/TheContainer.vue”导入容器；
从“axios”导入axios；
axios.defaults.baseURL=process.env.VUE\u APP\u API\u URL；
const app=createApp({
组成部分：{
容器
}
})
app.axios=axios；
app.$http=axios；
app.config.globalProperties.axios=axios；
app.config.globalProperties.$http=axios；
app.mount（“#app”）；

这是使用axios 0.21.1和vue 3.0.5

---

试图找出问题所在。。。vuejs v3 cookbook通过cdn调用axios 0.14代码。您应该安装axios的捆绑es模块：

删除当前版本：

 npm uninstall axios

然后运行：

 npm install @bundled-es-modules/axios --save

然后像这样使用它：

import { createApp } from 'vue';
import TheContainer from './components/TheContainer.vue';
import axios from 'axios/axios.js';

//create an axios instance in order to use it globally with same config
const instance = axios.create({
   baseURL: process.env.VUE_APP_API_URL,
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },

})


const app = createApp({
    components: {
        TheContainer
    }
})

app.config.globalProperties.axios = instance;

app.mount('#app');

---

看起来问题出在Vite 2.x中

并建议vite更愿意处理适当的ESM模块，而不是将其固定在自身内部（公平呼叫）

因此，从vite 2.0.0-beta50开始，我将使用fetch和discarding vue auth构建它（vue v3看起来非常复杂）

---

编辑：这件事从来没有搞清楚，但因为我是在拉拉维尔的宅地/流浪者中建造的-我发现完全摆脱那种环境似乎可以解决问题。。我还注意到Vite并不总是注意到Homestead/laravel环境中的代码更改-因此可能是缓存或其他事情。。。不管怎样，我把它拿了出来，一切正常

我会试试这个，但错误发生在“从‘axios’导入axios”；”。。。它肯定已安装（通过添加axios）恐怕无法正常工作-axios 0.21.1必须通过“axios/dist/axios.js”导入，否则找不到文件。。。它抛出了同样的错误哦，等等-没有看到包中的更改。你说没有看到包中的更改是什么意思。？我需要安装@bundled。你可以使用本机

fetch

方法而不是axios。当然，只有当涉及到简单的请求时，您才不需要使用任何axios额外的工具。是的，我知道，但我希望使用vue auth库，该库希望axios针对无法复制的apiI使用axios进行身份验证-使用

npx创建vite应用程序vite测试

，然后

纱线添加axios

，然后使用simple app.axios.get添加上面的代码（…）在主应用程序中，另一个在应用程序中。你能细化细节以复制吗？版本

“vite”：“^1.0.0-rc.13”

是的，我正在运行vite 2.0.0-它看起来更像是一个vite问题，vite的问题日志表明它处于“无法修复”状态请参阅-

从'@rollup/plugin commonjs'

导入commonjs，这里说的是一个用于将commonjs模块转换为ES6的rollup插件，因此它们可以包含在一个rollup bundle中。在

vite 2.0.0-beta50

中仍然不可复制，axios在一个最小的应用程序中运行良好。在axios-#174的案例中引用的问题具有误导性（引用了一个

axios

问题）很老，与#162无关，它引用了另一个库

remote redux devtools

，该库仍然存在问题，而

axios

现在似乎可以工作了（不确定是否在每种情况下）。