一些路由在 vue 3 的生产环境中不起作用
我有一个问题。 当我在路线停止工作的情况下上传生产构建服务器时,它在本地工作正常。 路由器/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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果您要获得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