Question

vue的新手，并且正在使用vue-cli3来搭建auth0 auth0-plugin.surge.sh的简单身份验证应用程序。我的router.js模块是：

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Callback from "./views/Callback.vue";

Vue.use(Router);

const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/callback",
      name: "callback",
      component: Callback
    }
  ]
});

// very basic "setup" of a global guard
router.beforeEach((to, from, next) => {
  // check if "to"-route is "callback" and allow access
  if (to.name == "callback") {
    next();
  } else if (router.app.$auth.isAuthenticated()) {
    // if authenticated allow access
    next();
  } else {
    // trigger auth0 login if not been authenticated before.
    // router.app refers to the root Vue instance the router was injected into
    router.app.$auth.login();
  }
});

export default router;

我期望当auth0回调到auth-plugin.surge.sh/callback时，我应该通过vue-router重定向到Callback组件。相反，我在/ callback页面上收到404错误。 webpack开发服务器可以正常工作。使用serve npm软件包时，会发生相同的错误。阅读Vue-cli deployment documentation可以很容易地看出，部署到urge.sh不需要任何特殊措施。我已经在Google上搜索并搜索过该网站，但没有找到能解决我问题的方法。任何帮助表示赞赏。

Answer 1

好，结果证明，使用vue-router时，需要浪涌网站Adding a 200.html page上所述的200.html文件作为服务器的全部路由。如果有人有使用-s选项使用serve npm package的经验，我很想知道您是如何工作的。希望这在部署SPA时对其他人有所帮助。我发现here

是部署SPA时对服务器配置的一个很好的介绍

带Vue-cli3和静态站点的部署问题

1 个答案: