类型错误：a.then 在生产环境中编译时不是函数

Question

我正在尝试使用npm run build（vite build）在生产环境中编译我的 vue 应用程序。

之后，我尝试使用 /dist 文件夹在我的服务器上提供我的应用程序，一切似乎都运行良好，我能够发送获取请求，单击各种链接等。

不幸的是，登录后当我应该重定向时，我收到错误

类型错误：a.then 在生产环境中编译时不是函数

和

未捕获（承诺中）类型错误：a.then 不是函数”

当我处于开发模式时，一切都工作得很好，只是在生产中不起作用。

好像和路由器有关系

这是我的路由器的代码：

const state = reactive({
    token: localStorage.getItem("token"),
    userAdmin: false,
    userRestaurateur: false,
    userDeliverer: false
});

if (state.token) {
    const user = JSON.parse(atob(state.token.split('.')[1]))
    state.userAdmin = Object.values(user.roles).includes('ROLE_ADMIN');
    state.userRestaurateur = Object.values(user.roles).includes('ROLE_RESTAURANT');
    state.userDeliverer = Object.values(user.roles).includes('ROLE_DELIVERER');
}

const router = createRouter({
    history: createWebHistory('/'),
    routes: [
        {
            path: '/',
            name: 'home',
            component: function () {
                if (state.token && state.userAdmin) {
                    return Users
                } else if (state.token && state.userRestaurateur) {
                    return HomeRestaurateur
                }else if (state.token && state.userDeliverer) {
                    return Commands
                }else {
                    return Home
                }
            }
        },
        {
            path: "/login",
            name: "login",
            component: Login,
        },
        {
            path: "/forgot-password",
            name: "forgot_password",
            component: ForgotPassword,
        },
        {
            path: "/reset-password/:token",
            name: "reset_password_token",
            component: ResetPassword,
        },
        {
            path: "/register",
            name: "register",
            component: Register,
        },
        {
            path: "/profile",
            name: "editProfile",
            component: editProfile,
        },
        {
            path: "/Restaurant/:id/Menu",
            name: "Meals",
            component: Meals,
        },
        {
            path: "/admin/users",
            name: "admin_users",
            component: function () {
                if (state.userAdmin) {
                    return Users
                } else {
                    return Error403
                }
            }
        },
        {
            path: "/admin/restaurants",
            name: "admin_restaurants",
            component: function () {
                if (state.userAdmin) {
                    return Restaurants
                } else {
                    return Error403
                }
            }
        },
        {
            path: "/admin/restaurants_request",
            name: "admin_restaurants_request",
            component: function () {
                if (state.userAdmin) {
                    return RestaurantsRequest
                } else {
                    return Error403
                }
            }
        },
        {
            path: "/restaurants/new",
            name: "create_restaurants",
            component: CreateRestaurant,
        },
        {
            path: "/admin/reports",
            name: "admin_reports",
            component: function () {
                if (state.userAdmin) {
                    return Reports
                } else {
                    return Error403
                }
            }
        },
        {
            path: "/orders",
            name: "orders",
            component: Commands,
        },
        {
            path: "/:pathMatch(.*)*",
            name: "not_found",
            component: Error404,
        }
    ],
});

我尝试检查其他方法是否正常工作，尝试更改服务器，但似乎没有任何效果。

Answer 1

我也遇到了同样的问题。我的本地构建工作正常，但在构建生产并部署到我的服务器后，我遇到了类似的错误。

我的控制台错误是

Uncaught (in promise) TypeError: i.then is not a function"

堆栈跟踪指向 vue-router。我尝试了很多事情，直到看到你的评论。在我的路线中，我具有以下组件的功能：

  {
    path: '/profile',
    name: 'Profile',
    component: () => Profile, //this was the problem
  },

我把它改为：

  {
    path: '/profile',
    name: 'Profile',
    component: Profile, //this was the fix
  },

现在它正在工作了！