部署问题 w/Vue-cli3 和静态站点

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 页面的 404 错误。 webpack 开发服务器按预期工作。使用 serve npm 包时出现同样的错误。阅读 Vue-cli deployment documentation 它使得部署到 surge.sh 不需要任何特殊措施看起来非常简单。我用谷歌搜索并搜索了这个网站，但没有找到解决我问题的方法。非常感谢任何帮助。

Answer 1

好的，事实证明您需要一个 200.html 文件，如 surge 网站 Adding a 200.html page for the server as a catch all route when using vue-router. If anybody has experience with the serve npm package 上所述，使用 -s 选项我很想知道您是如何让它工作的。希望这在部署 SPA 时对其他人有所帮助。我发现部署 SPA 时关于服务器配置的一篇很好的文章 here

部署问题 w/Vue-cli3 和静态站点

Deployment issue w/Vue-cli3 and static site

web-deployment

vue.js

vue-router

vue-cli-3