vite build后axios create()报错，显示axios is not a constructor

Question

我有一个使用vite + vue3 + typescript的项目。

它能够 npm run dev 和 npm run build。

错误只发生在npm run preview，唯一的线索就是这个 Axios is not a constructor

这是我的 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa';
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(), VitePWA( )
    ],
    build: {
        target: 'esnext',
        sourcemap: true,
        rollupOptions: {
            // make sure to externalize deps that shouldn't be bundled
            // into your library
            external: ["vue"],
            output: {
                // Provide global variables to use in the UMD build
                // for externalized deps
                globals: {
                    vue: "Vue",
                },
            },
        },
    },

    resolve: {
        alias: {
            '~/': `${resolve(__dirname, 'src')}/`,
            '@': resolve('src'),
            'views': resolve('src/views'),
            '@components': resolve('src/@components'),
            'seedwork': resolve('src/infrastructure/seedwork'),
            'model': resolve('src/infrastructure/model'),
            "assets": resolve(__dirname, "src/assets"),
            "~assets": resolve(__dirname, "/src/assets"),
        }
    },
})

如果遇到这种错误，应该如何调试？

找到原因了，这可能是因为我的axios拦截器。一旦我删除并重建它，它将能够启动页面并显示页面。现在我仍然不知道为什么这个在 vite build 之后会导致错误，但是 vite 工作正常。

//main.ts

...
const noAuthHttpClient = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
});

const httpClient = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
    headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
    }
});

axiosInterceptors.decorate(noAuthHttpClient);
axiosInterceptors.decorate(httpClient);

const roles = {
    "superAdmin": "Super Admin",
};
const config = {
    service: createService({ noAuthHttpClient, httpClient }),
    role: roles.superAdmin,
}
const router = createRouterFunction(config);
const app = createApp({
    render: () => (
        h(App)
    )
});


// app.config.globalProperties.$swal = Swal;
app.config.globalProperties.$messages = messages;
app.config.globalProperties.$service = config.service;
...

Answer 1

好的，发现问题是因为目前的AXIOS不支持esm。因此当运行构建后，Axios 不是构造函数出现。

但我发现支持为此构建 redaxios。只是没有拦截器，拦截器没有合并。我自己创建分支并根据之前的提交进行更新。在我这边测试是可行的。

https://github.com/developit/redaxios/pull/75

如果你们可以的话，帮我回顾一下，看看哪里可以改进。谢谢

vite build后axios create()报错，显示axios is not a constructor

Axios create() error after vite build, show Axios is not a constructor

typescript

vue.js

axios

vue-router

vite