时间戳

首页 > 解决方案 > 带有 Vue-cli3 和静态站点的部署问题

vue.js - 带有 Vue-cli3 和静态站点的部署问题

问题描述

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 部署文档，可以很容易地发现部署到 Surge.sh 不需要任何特殊措施。我已经用谷歌搜索并搜索了这个网站，但没有找到可以解决我的问题的东西。非常感谢任何帮助。

标签： vue.jsweb-deploymentvue-routervue-cli-3

解决方案

好的，事实证明，您需要一个 200.html 文件，如 Surge 网站上所述，在使用 vue-router 时为服务器添加一个 200.html 页面作为捕获所有路由。如果有人对使用 -s 选项的serve npm 包有经验，我很想知道你是如何让它工作的。希望这在部署 SPA 时对其他人有所帮助。我在这里找到了部署 SPA 时关于服务器配置的好文章

推荐阅读