Vue路由构建后显示空白页面

Question

Vue路由构建后显示空白页面

javascriptnode.jsvue.js

3

我需要帮助。我使用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并进行渲染。

- faso-dev

但是如果我在项目中没有使用vue-router，它就可以正常工作。 - faso-dev

你可能需要添加更多信息。Node 不太可能是这里的问题。 - evolutionxbox

@evolutionxbox 像什么？像什么？添加我的路由器代码和 main.js 代码吗？ - faso-dev

任何有助于我们理解问题的东西。运行和构建Vue应用程序基本上需要Nodejs（除非我弄错了）。 - evolutionxbox

我不知道我添加的代码是否能帮到你？ - faso-dev

显示剩余2条评论

3个回答

0

如果你正在2022年使用无服务器Vue 3应用程序和Vuex时遇到了这个问题（就像我一样），你可以像下面这样配置哈希历史记录。

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

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

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

export { router }

另请参阅：文档

- Bastian Immanuel André

0

router/index.js :

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

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => 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: ''
})

重要提示：使用 publicPath: '' 和 createWebHashHistory

就这些了。现在你可以构建了。但请记住，你的链接将显示为 /index.html#/dashboard。

- Sezgin İbiş

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- blex · Accepted Answer

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

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

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

如果您使用VueCLI，则此处的文档可能会有所帮助：

如果你使用Vue Router在“history”模式下，一个简单的静态文件服务器将会失败。例如，如果你使用了Vue Router来设置路由为“/todos/42”，那么“dev”服务器已经被配置为正确响应“localhost:3000/todos/42”，但是一个简单的静态服务器提供生产版本时将会响应404错误。为了解决这个问题，你需要配置你的生产服务器，使其对于任何不匹配静态文件的请求回退到“index.html”。Vue Router文档提供了常见服务器设置的配置说明。如果你不想处理这个问题，或者没有一个可以实现这一点的服务器，你可以在你的路由器中将“history”模式切换到“hash”模式。你的路由将可以通过“/index.html#/dashboard”等方式访问。