main.js

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");

router / 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路由器与/todos/42的路由一起使用，则已配置 dev 服务器以正确响应localhost:3000/todos/42，但使用一个简单的静态服务器来服务生产版本将会以404代替。

要解决此问题，对于与静态文件不匹配的所有请求，您需要将生产服务器配置为回退到index.html。 Vue路由器文档提供了configuration instructions for common server setups。

如果您不想处理此问题，或者没有服务器允许您执行此操作，则可以在路由器中将history切换为hash模式。您的路线可以在/index.html#/dashboard上访问，依此类推。

生成时，vue-router显示空白页面

main.js

router / index.js

App.vue

1 个答案: