vue-router 在构建时显示空白页面

Question

我在寻求帮助。我使用 vuejs 来制作我的应用程序。一切都很完美。但是我做了 npm run build，我提取了dist文件夹并打开了index.html，我有一个空白页，当我在控制台中查看时，我没有错误。

main.js

import Vue from "vue";
import Vuex from "vuex";
import router from "./router";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";
import store from "./store";
import {
  ValidationObserver,
  ValidationProvider,
  extend,
  localize
} from "vee-validate";
import fr from "vee-validate/dist/locale/fr.json";
import * as rules from "vee-validate/dist/rules";

// install rules and localization
Object.keys(rules).forEach(rule => {
  extend(rule, rules[rule]);
});

localize("fr", fr);

// Install components globally
Vue.component("ValidationObserver", ValidationObserver);
Vue.component("ValidationProvider", ValidationProvider);

Vue.config.productionTip = false;

//load vue-moment
Vue.use(require("vue-moment"));

//Load vuex
Vue.use(Vuex);

//Load vueRouter
new Vue({
  router,
  vuetify,
  store,
  render: h => h(App)
}).$mount("#app");

路由器/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Professeur from "../components/Professeur";
import Matiere from "../components/Matiere";
import Dashboard from "../components/Dashboard";
import Filiere from "../components/Filiere";
import Salle from "../components/Salle";
import Shedule from "../components/Shedule";
import SheduleLine from "../components/SheduleLine";
import Login from "../components/Login";
import Home from "../components/Home";

Vue.config.productionTip = false;

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/dashboard",
      name: "dashboard",
      component: Dashboard,
      meta: {
        requiresAuth: true
      },
      children: [
        {
          path: "personnel/professeurs",
          name: "p_professeur",
          component: Professeur
        },
        {
          path: "",
          name: "home",
          component: Home
        }
      ]
    },
    {
      path: "/login",
      name: "login",
      component: Login,
      meta: {
        guest: true
      }
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    let user = JSON.parse(localStorage.getItem("_GET_TOKEN"));
    if (!user && !user.token) {
      next({
        name: "login"
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

export default router;

App.vue

<template>
  <v-app>
    <router-view/>
  </v-app>
</template>

<script>
  export default {
    name: 'app',
  }
</script>

编译后，我没有错误，只有一个空白页。

感谢您的帮助。我尝试不使用路由器视图，我设法在为生产编译后启动 index.html 并且我有一个渲染。

Answer 1

您的路由器使用history 模式，这意味着您将使用/login 或/dashboard 或/dashboard/personnel/professeurs 之类的路径访问您的页面，这是您声明的唯一路由。

/ 或 /index.html 不显示任何内容，因为路由器不知道它们是什么。

但是，为了使history 模式正常工作，您不能只拥有一个静态服务器。服务器必须知道对/dashboard 的请求应该返回index.html 文件。

如果您使用 VueCLI，docs here 可能会有所帮助：

如果你在history模式下使用Vue Router，一个简单的静态文件服务器会失败。例如，如果您将 Vue Router 与 /todos/42 的路由一起使用，则 dev 服务器已配置为正确响应 localhost:3000/todos/42，但服务于生产构建的简单静态服务器将响应404 代替。

要解决此问题，您需要将生产服务器配置为回退到index.html，以处理与静态文件不匹配的任何请求。 Vue Router 文档提供configuration instructions for common server setups。

如果您不想处理此问题，或者没有服务器可以执行此操作，您可以在路由器中将history 切换到hash 模式。您的路线将可通过/index.html#/dashboard 等访问。