Vue 2 应用程序在生产中仅将一个视图呈现为空白

Question

我有一个在开发中完美运行的 Vue 2 应用程序。但是，在生产中，其中一页呈现为空白。没有错误消息，没有 404。我找不到此页面与其他正常工作的页面有何不同。我的路由器页面如下所示：

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Login",
    component: () =>
      import("../views/Login.vue"),
  },

  {
    path: "/main",
    name: "Main",
    component: () =>
      import("../views/Main.vue"),
  },
  {
    path: "/register",
    name: "Register",
    component: () =>
      import("../views/Register.vue"),
  },
  {
    path: "/login",
    name: "Login",
    component: () =>
      import("../views/Login.vue"),
  },
  {
    path: "/players",
    name: "Players",
    component: () =>
      import("../views/Players.vue"),
  },

  {
    path: "/invitations",
    name: "Invitations",
    component: () =>
      import("../views/Invitations.vue"),
  },

  {
    path: "/editplayer",
    name: "Editplayer",
    component: () =>
      import("../views/Editplayer.vue"),
  },

  {
    path: "/message",
    name: "Message",
    component: () =>
      import("../views/Message.vue"),
  },

];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

.vue 文件如下所示：

<template>
  <v-card color="basil">
    <v-card-title class="text-center justify-center py-6">
      <h2 class="font-weight-bold blue--text">
        Sign Up
      </h2>
    </v-card-title>

        <v-card
        color="basil"
          flat
        >

<!--- Start registration form --->
          <v-card-text >

<v-form v-model="valid" >
    <v-container>
      <v-row>
        <v-col
          cols="12"
          md="4"
        >
          <v-text-field
            v-model="invitationCode"
            label="Invitation Code"
            tabindex="1"
            required
          ></v-text-field>
        </v-col>
        <v-col
          cols="12"
          md="4"
        >
          <v-text-field
            v-model="firstname"
            :rules="firstRules"
            :counter="15"
            label="First name"
            required
            tabindex="2"
          ></v-text-field>
        </v-col>

        <v-col
          cols="12"
          md="4"
        >
          <v-text-field
            v-model="lastname"
            :rules="lastRules"
            :counter="15"
            label="Last name"
            required
            tabindex="3"
          ></v-text-field>
        </v-col>
        <v-col
          cols="12"
          md="4"
        >
          <v-text-field
            v-model="displayname"
            :rules="displayRules"
            :counter="40"
            label="Name you want others to see"
            required
            tabindex="4"
          ></v-text-field>
        </v-col>
        <v-col
          cols="12"
          md="4"
        >
          <v-text-field
            v-model="email"
            :rules="emailRules"
            label="E-mail"
            required
            tabindex="5"
          ></v-text-field>
        </v-col>
        <v-col
          cols="6"
          md="6"
        >
        Phone <br />

          <v-text-field
            v-model="phone"
            hint="Numbers Only!"
            required
            tabindex="6"
          ></v-text-field>
          </v-col>


        <v-col
          cols="12"
          md="4"
        >
          <v-text-field
           v-model="password"
            :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
            :rules="[rules.required, rules.min]"
            :type="show1 ? 'text' : 'password'"
            name="passowrd"
            label="Password"
            hint="At least 8 characters"
            class="input-group--focused"
            @click:append="show1 = !show1"
            tabindex="7"
          ></v-text-field>
        </v-col>
        <v-col
          cols="12"
          md="4"
        >
          <v-text-field
           v-model="password2"
            :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
            :rules="[rules.required, rules.min]"
            :type="show1 ? 'text' : 'password'"
            name="password2"
            label="Re-enter your password"
            hint="At least 8 characters"
            class="input-group--focused"
            @click:append="show1 = !show1"
            tabindex="8"
          ></v-text-field>
        </v-col>
      </v-row>
      <v-btn  tabindex="9"
      class="orange" @click="register()"><v-icon>mdi-check</v-icon></v-btn>
    </v-container>
  </v-form>
          </v-card-text>

        </v-card>
  </v-card>
</template>

<script>
import EventService from '../Services/EventServices'
  export default {
    name: "Register",
    data () {
      return {
     valid: false,
      firstname: '',
      lastname: '',
      phone: '',
      firstRules: [
        v => !!v || 'First name is required',
        v => v.length <= 10 || 'Name must be less than 15 characters',
      ], 
      lastRules: [
        v => !!v || 'Last name is required',
        v => v.length <= 10 || 'Name must be less than 15 characters',
      ],      
      displayRules: [
        v => !!v || 'Display name is required',
        v => v.length <= 40 || 'Name must be less than 40 characters',
      ],
      phoneRules: [
        v => !!v || 'Phone number is required',
        v => v.length <= 40 || 'Name must be less than 40 characters',
      ],
      displayname: '',
      userInfo: [],

      password: '',
      password2: '',
      show1: false,
      message: '',
      invitationCode: '',
      email: '',
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+/.test(v) || 'E-mail must be valid',
      ],
      rules: {
      required: value => !!value || 'Required.',
      min: v => v.length >= 8 || 'Min 8 characters',
      emailMatch: () => (`The email and password you entered don't match`),
    },
      }
    },

  methods: {
    async register() {
//      console.log('inlogin.vue, starting register ')
      var areaCode = this.phone.substr(0, 3)
      var prefixCode = this.phone.substr(3,3)
      var phoneLine = this.phone.substr(6,4)
      await EventService.registration(this.email, this.firstname, this.lastname, this.displayname, this.password, areaCode, prefixCode, phoneLine, this.invitationCode)
      .then(
        (registerReturn => {
          if (registerReturn === 'invalid') {
            this.regError = "Invalid Invitation Code with this Email Address."
          } else {
//            console.log('registered', registerReturn)
            this.$router.push("/")
          }
            
        })

      );
    }
  }
  }
</script>

<style>
/* Helper classes */
.basil {
  background-color: #FFFBE6 !important;
}
.basil--text {
  color: #356859 !important;
}
</style>

如果有帮助，实时页面位于https://0-0-2.net/register。我不确定从哪里开始解决这个问题，因为它在开发中有效。我猜在构建过程中出现了一些问题？你会建议我如何解决这个问题？

Answer 1

比赛，感谢您提醒我们回归基础。我替换了文件，它仍然没有工作。但它至少确实消除了该文件的问题。

对于以后看到这个的人来说，我解决问题的方法是

--将文件重命名为Registration.vue

--改变了

export default {
    name: "Register",

到：

export default {
    name: "Registration",

--相应地更新了路线。重新运行“npm run build”命令。

一切正常。我最好的猜测是沿线某处的某种缓存问题。它可能没有解决根本问题，但它让我的应用程序正常工作并让我继续努力。