时间戳

首页 > 解决方案 > import axios 导致 vue v3 和 vite 出现问题

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

问题描述

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

标签： vue.jsaxiosvuejs3vite

解决方案

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

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

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

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

推荐阅读