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

Posted 2023-02-22

【中文标题】import axios 导致 vue v3 和 vite 出现问题

【英文标题】：import axios causes problems in vue v3 and vite

【发布时间】：2021-04-30 04:56:40

【问题描述】：

从'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 食谱遗憾地使用通过 cdn 调用 axios 0.14 代码

【问题讨论】：

可以使用原生的fetch方法代替axios。当然，只有在请求简单的情况下，不需要使用任何 axios 额外的工具。

是的，我知道，但我希望使用 vue-auth 库，它需要 axios 对 api 进行身份验证

我无法重现 - 使用 npx create-vite-app vite-test 然后 yarn add axios，然后您的代码在 main 中使用简单的 app.axios.get(...) 并在 App 中使用另一个。你能充实细节来重现吗？版本"vite": "^1.0.0-rc.13"

是的，我正在运行 vite 2.0.0 - 它看起来更像是一个 vite 问题，并且 vite 的问题日志表明它属于“无法修复”

请看Vite package - rollup.config.js - import commonjs from '@rollup/plugin-commonjs' 这里说的是@rollup/plugin-commonjs README - 一个将 CommonJS 模块转换为 ES6 的 Rollup 插件，因此它们可以包含在 Rollup 包中.

【参考方案1】：

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

issue #174 和 issue 162 建议 vite 更愿意处理正确的 ESM 模块，而不是在自身内部修复它们（公平调用）..

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

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

【讨论】：

仍然无法使用 vite 2.0.0-beta50 重现，axios 在最小的应用程序中运行良好。

引用的问题在 axios 的情况下具有误导性 - #174（引用 axios 问题）是旧的并且关闭到 #162，它引用了另一个库 remote-redux-devtools，它仍然是有问题，而 axios 似乎 现在可以工作（不确定是否在每种情况下）。

【参考方案2】：

Redaxios 是 axios 的现代翻版。

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

这解决了我使用 vite 和 axios 的问题。也可以在 webpack 中使用。

【讨论】：

听起来是个不错的解决方案...我有点放弃了 vue v3 下的 axios，因为我可以将 fetch 与 vuex 一起使用

【参考方案3】：

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

【讨论】：

我会试试这个，但错误发生在“import axios from 'axios';” ...它肯定是安装的（通过 yarn add axios）

恐怕这不起作用 - axios 0.21.1 必须通过 'axios/dist/axios.js' 导入，否则找不到文件......它会引发同样的错误

你说的没有看到包的变化是什么意思。？

【参考方案4】：

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

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

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