导入 axios 导致 vue v3 和 vite 出现问题

Question

import axios from 'axios';

投票结果

Uncaught SyntaxError: import not found: default

示例代码

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 代码

Answer 1

你应该安装一个 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');

Answer 2

看起来问题出在 Vite 2.x

issue #174 and issue 162 表明 vite 更愿意处理适当的 ESM 模块，而不是在自身内部修复它们（公平调用）..

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

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

Answer 3

Redaxios 是 axios 的现代翻版。

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

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

Answer 4

所以，这个问题花了我一些时间来解决，我想分享我的经验，希望它能帮助到别人。

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

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

Answer 5

你应该安装这个vite插件@originjs/vite-plugin-commonjs。

npm install @originjs/vite-plugin-commonjs --save-dev

将插件添加到您的 vite.config.ts 就可以了。

import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

export default {
    plugins: [
        viteCommonjs()
    ]
}

就这些了

导入 axios 导致 vue v3 和 vite 出现问题

import axios causes problems in vue v3 and vite

vue.js

axios

vuejs3

vite