Some of Routs do not work in production in vue 3

Question

I am having an issue. When I upload my production build-in server following route stops working and it is working fine locally. router/index.js

import Splash from '../views/Splash.vue';

const routes = [
  {
    path: "/",
    name: "Splash",
    component: Splash,
  },
  {
    path: "/:reference",
    name: "reference",
    component: Splash,
  },
  {
    path: "/home",
    name: "home",
    component: Home,
  },
]

Splash.vue

<template>
  <div class="bg-darkblue custom-h-100" v-if="reference == ''">
    <p class="heading-text text-light text-center f-14 py-3"></p>
    <div class="container">
      <div class="card">
        <div class="card-body">
          <div class="text-center text-dark">
            <h5 class="f-18 mt-3 mb-4"><b>Find Your reservation</b></h5>
          </div>
          <div class="mb-3">
            <label class="label-title">Last Name</label>
            <input
              type="text"
              placeholder="Last name"
              v-model="last_name"
              class="form-control"
            />
          </div>
          <div class="mb-3">
            <label class="label-title">Booking Reference Number</label>
            <input
              type="text"
              placeholder="Booking Reference  No"
              v-model="booking_code"
              class="form-control"
            />
            <span errorMsg class="text-danger" v-if="errorMsg != ''">{{
              errorMsg
            }}</span>
          </div>
          <div>
            <p class="text-dark text-center my-4 f-14 d-none">
              Any Question?<br />Call Frontdesk 1 888 999 9312
            </p>
            <div class="round-circle" @click="submitBooking">
              <i class="bi bi-search"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBookingDetailsbyRefNo } from "../restApi";

export default {
  data() {
    return {
      reference: this.$route.params.reference == undefined ? '' : this.$route.params.reference,
      booking_code: "",
      last_name: "",
      errorMsg: "",
    };
  },
  mounted() {
    this.setBooking();
  },
  methods: {
    async setBooking() {
      if (this.reference != '') {
        localStorage.reference = this.reference;
        this.$router.push({ name: "home" });
      }
    },
    async submitBooking() {
      if (this.booking_code != "" && this.last_name != "") {
        getBookingDetailsbyRefNo(this.booking_code, this.last_name)
          .then((Response) => {
            this.booking = Response;
            if (Response[0].reference_no == this.booking_code) {
              localStorage.reference = Response[0].reference_no;
              this.$router.push({ name: "home" });
            } else {
              this.errorMsg = "Invalid Booking Refrence No";
            }
          })
          .catch((error) => {
            console.log(error);
            this.errorMsg = "Invalid Booking Refrence No";
          });
      } else {
        this.errorMsg = "Enter Valid details";
      }
    },
  },
};
</script>

everything works properly on the local PC, but not working in the production build.

The second and third path is working fine but when I open the first one I am not getting any kind of error or console-log in-browser dev tools.

give me some kind of solution or suggestion on how to do it?

Answer 1

If you are getting 404 for the Splash file, check the name in the file directory. If import splash from "./splash.vue" make it splash.vue in the filename; If it is "Splash.vue" it works in some places and not in others. Note the lowercase and uppercase letters