我正在开发的 VUE 应用程序运行时没有错误，但它显示一个空白页面

Question

当我在我的 cli 中使用 npm run serve 运行 vue 应用程序时。它显示一个空白页面，但它应该显示一个登录视图。不知道为什么，我觉得应该是这样的

这是注册视图文件

<template>
  <div class="container-fluid">

    <div class="row">
      <div class="col-12 col-sm-10 col-md-8 offset-sm-1 offset-md-2">
        <div id="signUp" class="mt-5">

          <form class="border border-primary rounded form-inline" @submit="signUp">

            <h2 class="col-12 text-center text-primary mt-3 mb-5">Registro</h2>

            <div class="form-group col-12">
              <label class="custom-label col-md-3" for="names">Nombres</label>
              <input id="names" class="form-control col-12 col-sm-10 col-md-7 offset-sm-1" type="text"
                     placeholder="Nombres" v-model="names" required/>
            </div>

            <div class="form-group col-12">
              <label class="custom-label col-md-3 display" for="surnames">Apellidos</label>
              <input id="surnames" class="form-control col-12 col-sm-10 col-md-7 offset-sm-1" type="text"
                     placeholder="Apellidos" v-model="surnames" required/>
            </div>

            <div class="form-group col-12">
              <label class="custom-label col-md-3" for="username">Nombre de Usuario</label>
              <input id="username" class="form-control col-12 col-sm-10 col-md-7 offset-sm-1" type="text"
                     placeholder="Nombre de Usuario" v-model="username" required/>
            </div>

            <div class="form-group col-12">
              <label class="custom-label col-md-3 display" for="password">Contrase&ntilde;a</label>
              <input id="password" class="form-control col-12 col-sm-10 col-md-7 offset-sm-1" type="password"
                     placeholder="Contraseña" v-model="password" required/>
            </div>

            <div class="form-group col-12">
              <label class="custom-label col-md-3 display" for="cPassword">Confirmar Contrase&ntilde;a</label>
              <input id="cPassword" class="form-control col-12 col-sm-10 col-md-7 offset-sm-1" type="password"
                     placeholder="Confirmar Contraseña" v-model="cPassword" required
                     :class="{ 'is-invalid': cPassword !== '' && cPassword !== password,
                                 'is-valid': cPassword !== '' && cPassword === password }"/>
            </div>

            <div class="form-group col-12">
              <label class="custom-label col-md-3 display" for="rol">Tipo de Usuario</label>
              <select id="rol" class="form-control col-12 col-sm-10 col-md-7 offset-sm-1" v-model="role" required>
                <option value="" disabled selected>-- Seleccione un Rol --</option>
                <option v-for="role in roles" :value="role.id">{{role.roleName}}</option>
              </select>
            </div>

            <div class="col-12 col-sm-6 col-md-5 offset-md-2 text-center mb-3">
                <span class="text-primary">
                  <small>
                    <a href="#">&iquest;Ya tienes cuenta? Inicia Sesi&oacute;n</a>
                  </small>
                </span>
            </div>

            <div class="col-12 col-sm-5 col-md-4 mb-3">
              <button class="col-sm-10 col-md-10 offset-sm-1 offset-md-2 btn btn-primary" type="submit">
                Registrar
              </button>
            </div>

          </form>

        </div>
      </div>
    </div>

  </div>
</template>

<script>

  import axios from 'axios'

  const path = '/registro/';

  export default {
    name: "SignUp",
    data( ){
      return{
        names: '',
        surnames: '',
        username: '',
        password: '',
        cPassword: '',
        role: '',
        roles: [],
        response: null
      }
    },
    beforeCreate( ){
      const rolesPath = '/roles';
      axios
        .get( this.$store.state.backURL + rolesPath )
        .then( response => {
          if( response.status !== 200 ){
            alert( "Error en la petición. Intente nuevamente" )
          }else{
            this.roles = response.data;
            console.log( this.roles );
          }
        }).catch( response => {
          alert( "No es posible conectar con el backend en este momento" );
          console.log( response );
        });
    },
    methods:{
      signUp( event ){
        if( this.password !== this.cPassword ){
          event.preventDefault( );
          return;
        }
        axios
          .post( this.$store.state.backURL + path + this.role,
            {
              names: this.names.trim( ),
              surnames: this.surnames.trim( ),
              username: this.username.trim( ),
              password: this.password
            }
          ).then( response => {
            if( response.status !== 201 ){
              alert( "Error en el almacenamiento del usuario" )
            }else{
              alert( "Usuario registrado correctamente" )
            }
          }).catch( error =>{
            if( error.response.status === 400 ){
              alert( "Parece que ya existe un usuario con el nombre de usuario \"" + this.username + "\"" );
            }else{
              alert( "Error en la aplicación" );
            }
            console.log( error );
          });
        event.preventDefault( );
        return true;
      }
    }
  }
</script>

<style scoped>
  .form-inline{
    width: auto;
  }

  .form-inline .form-group{
    margin-bottom: 1rem;
  }

  .custom-label{
    display: inline-block;
    justify-content: right !important;
    text-align: right !important;
  }

  @media (max-width: 767px) {
    .custom-label{
      display: none !important;
    }
  }
</style>

这些是属于 src 文件的文件。

Main.js

import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: function (h) { return h(App) }
}).$mount('#app');

路由器.js

import Router from 'vue-router'
import SignUp from "./views/SignUp";

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/registro",
      name: "signup",
      component: SignUp
    }
  ]
})

store.js

import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    backURL: 'http://localhost:8081'
  },
  mutations: {

  },
  actions: {

  }
})

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
</style>

我尝试将文件 node_modules 添加到我的项目中并试图理解为什么会在 VUE 中发生这种情况，但我不明白为什么会发生这种情况。

Answer 1

App.vue 文件中的<router-view/> 呈现映射到当前路由的组​​件。当您在浏览器中打开您的应用程序 URL (http://localhost:8080/) 时，当前路由是 /。您没有映射到 / 路由的组件，因此只呈现一个空白的 div。您唯一的组件映射到/registro。您可以浏览到http://localhost:8080/registro 来呈现您的SignUp 组件，或者您可以将Signup 组件映射到/，如下所示：

import Router from 'vue-router'
import SignUp from "./views/SignUp";

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "signup",
      component: SignUp
    }
  ]
})

或者，将/ 路由重定向到/registro：

import Router from 'vue-router'
import SignUp from "./views/SignUp";

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      redirect: '/registro'
    },
    {
      path: "/registro",
      name: "signup",
      component: SignUp
    }
  ]
})