admin管理员组

文章数量:1279055

I'm asking for help. I use vuejs to make my application. Everything works perfectly. But I do the npm run build, I extract the dist folder and I open index.html, I have a blank page, and when I look in the console, I have no errors.

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 ponents globally
Vueponent("ValidationObserver", ValidationObserver);
Vueponent("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 "../ponents/Professeur";
import Matiere from "../ponents/Matiere";
import Dashboard from "../ponents/Dashboard";
import Filiere from "../ponents/Filiere";
import Salle from "../ponents/Salle";
import Shedule from "../ponents/Shedule";
import SheduleLine from "../ponents/SheduleLine";
import Login from "../ponents/Login";
import Home from "../ponents/Home";

Vue.config.productionTip = false;

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/dashboard",
      name: "dashboard",
      ponent: Dashboard,
      meta: {
        requiresAuth: true
      },
      children: [
        {
          path: "personnel/professeurs",
          name: "p_professeur",
          ponent: Professeur
        },
        {
          path: "",
          name: "home",
          ponent: Home
        }
      ]
    },
    {
      path: "/login",
      name: "login",
      ponent: 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>

Once I pile, I have no errors but a blank page.

Thanks for any help. I tried without the router view, I manage to launch the index.html once piled for production and I have a rendering.

I'm asking for help. I use vuejs to make my application. Everything works perfectly. But I do the npm run build, I extract the dist folder and I open index.html, I have a blank page, and when I look in the console, I have no errors.

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 ponents globally
Vue.ponent("ValidationObserver", ValidationObserver);
Vue.ponent("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 "../ponents/Professeur";
import Matiere from "../ponents/Matiere";
import Dashboard from "../ponents/Dashboard";
import Filiere from "../ponents/Filiere";
import Salle from "../ponents/Salle";
import Shedule from "../ponents/Shedule";
import SheduleLine from "../ponents/SheduleLine";
import Login from "../ponents/Login";
import Home from "../ponents/Home";

Vue.config.productionTip = false;

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/dashboard",
      name: "dashboard",
      ponent: Dashboard,
      meta: {
        requiresAuth: true
      },
      children: [
        {
          path: "personnel/professeurs",
          name: "p_professeur",
          ponent: Professeur
        },
        {
          path: "",
          name: "home",
          ponent: Home
        }
      ]
    },
    {
      path: "/login",
      name: "login",
      ponent: 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>

Once I pile, I have no errors but a blank page.

Thanks for any help. I tried without the router view, I manage to launch the index.html once piled for production and I have a rendering.

• javascript
• node.js
• vue.js

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Feb 15, 2020 at 12:23 faso-devfaso-dev 18311 gold badge33 silver badges1212 bronze badges 7

• But if I didn't use vue-router in my project, it works fine. – faso-dev Commented Feb 15, 2020 at 12:25
• You might need to add more information. Node is not likely to be the issue here – evolutionxbox Commented Feb 15, 2020 at 12:26
• @evolutionxbox like what ? like what ? Add the code of my router and main.js? – faso-dev Commented Feb 15, 2020 at 12:30
• Anything that can help us understand the issue. Nodejs is pretty much required (unless I’m mistaken) for running and building Vue apps. – evolutionxbox Commented Feb 15, 2020 at 12:49
• I don't know if with the code I added, if it can help you? – faso-dev Commented Feb 15, 2020 at 13:01

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 7

You're using history mode for your router, which means you'll access your pages with paths like /login or /dashboard or /dashboard/personnel/professeurs, which are the only routes you declared.

/ or /index.html does not display anything because the router doesn't know what they are.

However, in order to have history mode working, you cannot just have a static server. The server has to know that a request to /dashboard should return the index.html file.

If you used VueCLI, the docs here might be helpful:

If you are using Vue Router in history mode, a simple static file server will fail. For example, if you used Vue Router with a route for /todos/42, the dev server has been configured to respond to localhost:3000/todos/42 properly, but a simple static server serving a production build will respond with a 404 instead.

To fix that, you will need to configure your production server to fallback to index.html for any requests that do not match a static file. The Vue Router docs provides configuration instructions for mon server setups.

If you don't want to deal with this, or don't have a server enabling you to do this, you can switch history to hash mode in your router. Your routes will be accessible at /index.html#/dashboard and so on.

If you are running into this issue (as I was) in 2022 with a serverless vue 3 application and vuex, you can configure the hash-histroy like so

import { createRouter, createWebHashHistory } from 'vue-router'
import { type RouteRecordRaw } from 'vue-router'
import { Admin, Wele } from '/@/views'

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        name: 'Wele',
        ponent: Wele
    },
    {
        path: '/admin',
        name: 'Admin',
        ponent: Admin
    }
]

const router = createRouter({
    history: createWebHashHistory(), // <--- this is important
    routes
})

export { router }

See also: docs

router/index.js :

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    ponent: HomeView
  },
  {
    path: '/about',
    name: 'about',
    ponent: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

export default router

main_folder/vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  publicPath: ''
})

Important: use publicPath: '' and createWebHashHistory

That is all. You can now build. But remember that your links will appear as /index.html#/dashboard.

本文标签： javascriptvuerouter showing blank page when builtStack Overflow