一些路由在 vue 3 的生产环境中不起作用

发布于 2025-01-20 20:04:19 字数 3436 浏览 1 评论 0原文

我有一个问题。 当我在路线停止工作的情况下上传生产构建服务器时,它在本地工作正常。 路由器/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>

一切在本地PC上正常工作,但在生产构建中不起作用。

第二和第三个路径正常工作,但是当我打开第一个路径时,我不会得到任何类型的错误或控制台内浏览器开发工具。

给我一些解决方案或建议?

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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

甜尕妞 2025-01-27 20:04:19

如果您要获得404的飞溅文件,请检查文件目录中的名称。如果从“ ./splash.vue”中导入溅起,则将其在文件名中splash.vue;
如果是“飞溅”,则可以在某些地方而不是在其他地方起作用。注意小写字母和大写字母

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文