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;

应用程序.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，这里的文档可能会有所帮助：

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

要解决此问题，您需要将生产服务器配置为回退到index.html与静态文件不匹配的任何请求。Vue Router 文档提供了常见服务器设置的配置说明。

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