4

从'axios'导入axios；

导致 vite 投掷

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

示例代码 
import { createApp } from 'vue';
import TheContainer from './components/TheContainer.vue';
import axios from 'axios';

axios.defaults.baseURL = process.env.VUE_APP_API_URL;

const app = createApp({
    components: {
        TheContainer
    }
})
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 代码

4

4 回答 4

2

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

问题 #174和问题 162表明 vite 宁愿必须处理正确的 ESM 模块，而不是在自身内部修复它们（公平调用）..

因此，从 vite 2.0.0-beta50 开始，我将使用 fetch 构建它并丢弃 vue-auth（无论如何，这对于 vue v3 来说看起来非常复杂）

编辑：从未深究，但由于我是在 Laravel 的 Homestead/Vagrant 中构建它 - 我发现将其完全脱离该环境似乎可以解决问题。我还注意到 Vite 并不总是注意到代码更改在 Homestead/laravel 环境中 - 所以它可能是缓存或其他东西......无论如何我把它拿出来并且一切正常

于 2021-01-27T03:35:37.333 回答
2

Redaxios是 axios 的现代翻版。

import axios from 'redaxios';
// use as you would normally

这解决了我对 vite 和 axios 的问题。也适用于 webpack。

于 2021-10-24T05:38:20.663 回答
0

您应该安装一个捆绑的 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');
于 2021-01-26T12:14:25.650 回答
0

所以，这个问题只是花了我一些时间来解决，我想分享我的经验，希望它对某人有所帮助。

尽管此答案中的某些解决方案有助于解决最初的问题，但在此过程中我还遇到了其他问题。例如，当我安装时，redaxios我注意到它没有X-XSRF-TOKEN在请求标头中发送（我的后端服务 Laravel Sanctum 需要）。

最后，真正解决我的问题的只是删除node_modules目录并重新安装（yarn）。我认为 vite 有一个已安装目录的缓存版本，无论我重新安装axios或在软件包之间切换多少次，它都会显示一些错误。

于 2022-01-04T12:51:30.403 回答