Javascript Laravel:Vue.js页面未在生产环境中显示

我在拉维尔做一个项目。我在Laravel刀片文件中使用vue.js组件。到目前为止，我有一个名为“Index.vue”的组件，它是从Index.blade.php加载的。另一个名为“create.vue”的组件从“create.blade.php”加载。问题是，在index.blade.php中单击“创建新服务”按钮时，Create.vue组件没有显示。所有其他Vue.js组件都可以正常工作，但此问题仅适用于该特定组件。我尝试运行“npm run dev”并更改了webpack.mix.js文件，但没有解决我的问题。我在本地机器上没有任何问题，只是在生产环境中

index.js

<x-admin-master>
@section('content')
    <div class="container">
        <div id="app">
            <Index></Index>

            <a href="{{ route('services.create') }}" class="btn btn-info">Create a new service</a>
        </div>
    </div>
@endsection
</x-admin-master>

创建.vue

<template>
<div>
      <p v-if="errors.length">
        <b>Please correct the following error(s):</b>
        <ul>
            <li v-for="error in errors">{{ error }}</li>
        </ul>
        </p>

    <form @submit.prevent="addService" action="/api/services" method="POST">
        <div class="form-group">
            <label for="name">Name: </label>
            <input type="text" name="name" class="form-control" id="name" placeholder="Enter service name" v-model="services.name">
        </div>

        <div class="form-group">
            <label for="vendor">Vendor: </label>
            <select class="form-control" name="vendor" placeholder="select vendor" v-model="services.vendor" value="Select vendor">
                    <option name="vendor" :value="service.vendor.id" v-for="service in services">{{service.vendor.name}}</option>
            </select>
        </div>

        <div class="form-group">
            <label for="service">Description: </label>
            <textarea class="form-control" id="desc" name="desc" rows="3" v-model="services.desc"></textarea>
        </div>

        <div class="d-flex flex-row hour-price" v-if="hourAndPrice">
            <div class="form-group">
                <input type="number" name="hours" class="form-control" @click="fixedPrice = false" id="hours" placeholder="Hours" v-model="services.hours">
            </div>
            <div class="form-group">
                <input type="number" name="price" class="form-control" @click="fixedPrice = false" id="price" placeholder="Price" v-model="services.price">
            </div>
        </div>

         <div class="d-flex flex-row fixed-price" v-if="fixedPrice">
            <div class="form-group">
                <input type="number"  @click="hourAndPrice = false" name="fixed_price" class="form-control" id="price" placeholder="Enter fixed price" v-model="services.fixed_price">
            </div>
        </div>
        
        <input type="submit" value="Add Service" class="btn btn-primary"> 

        <div class="btn-toolbar d-flex justify-content-end">
            <a href="#" class="btn btn-info">Services</a>
        </div>
    </form>
</div>
</template>


<script>

export default {
    
    data(){
        return {
            //vendors: this.vendors,
            //projects: this.projects,
            hourAndPrice: true,
            fixedPrice: true,
            services: [],
            errors: [],

            services: {
                name: null,
                vendor: null,
                desc: null,
                hours: null,
                price: null,
                fixed_price: null
            }
        }
    },
    methods: {
        addService(){

            let ok = ''

            if(this.services.name && this.services.vendor){
                ok = true
            }

            if(!this.services.name){
                this.errors.push('Service name is required')
            }

            if(!this.services.vendor){
                this.errors.push('Vendor ID is required')
            }

            if(ok) {
                axios.get('/sanctum/csrf-cookie').then(response => {
                    axios.post('/api/services', {
                        name: this.services.name,
                        vendor: this.services.vendor,
                        desc: this.services.desc,
                        hours: this.services.hours,
                        price: this.services.price,
                        fixed_price: this.services.fixed_price,
                    })
                    .then(function (response) {
                        console.log(response)
                        window.location.href = '/admin/services';
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                });
            }
        },
        loadServices: function(){
            axios.get('/api/services/getservicedata')
                .then(response => {
                    this.services = response.data;
                })
                .catch(function(error){
                    console.log(error);
                });
        }
    },
    mounted(){
        console.log('Successfully mounted!');
        this.loadServices()
    }
}

</script>

请更正以下错误：

{{error}


姓名：
小贩：
{{service.vendor.name}
说明：
导出默认值{
数据（）{
返回{
//卖主：这个是卖主，
//项目：这个项目，
霍兰普莱斯：是的，
固定价格：对，
服务：[]，
错误：[]，
服务：{
名称：空，
供应商：空，
desc:null，
小时数：空，
价格：空，
固定价格：空
}
}
},
方法：{
addService（）{
让ok=''
if（this.services.name&&this.services.vendor）{
ok=正确
}
如果（！this.services.name）{
this.errors.push（'需要服务名称'）
}
如果（！this.services.vendor）{
this.errors.push（'需要供应商ID'）
}
如果（确定）{
get（'/sanctum/csrf cookie'）。然后（响应=>{
axios.post（“/api/services”{
名称：this.services.name，
供应商：this.services.vendor，
desc:this.services.desc，
小时数：这个。服务。小时数，
价格：这个。服务。价格，
固定价格：此为。服务。固定价格，
})
.然后（功能（响应）{
console.log（响应）
window.location.href='/admin/services'；
})
.catch（函数（错误）{
console.log（错误）；
});
});
}
},
loadServices:function（）{
get（'/api/services/getservicedata'））
。然后（响应=>{
this.services=response.data；
})
.catch（函数（错误）{
console.log（错误）；
});
}
},
安装的（）{
console.log（'Successfully mounted！'）；
这是loadServices（）
}
}

您是否运行了

npm运行prod

而不是dev？是的，我运行了。同一问题

<template>
<div>
      <p v-if="errors.length">
        <b>Please correct the following error(s):</b>
        <ul>
            <li v-for="error in errors">{{ error }}</li>
        </ul>
        </p>

    <form @submit.prevent="addService" action="/api/services" method="POST">
        <div class="form-group">
            <label for="name">Name: </label>
            <input type="text" name="name" class="form-control" id="name" placeholder="Enter service name" v-model="services.name">
        </div>

        <div class="form-group">
            <label for="vendor">Vendor: </label>
            <select class="form-control" name="vendor" placeholder="select vendor" v-model="services.vendor" value="Select vendor">
                    <option name="vendor" :value="service.vendor.id" v-for="service in services">{{service.vendor.name}}</option>
            </select>
        </div>

        <div class="form-group">
            <label for="service">Description: </label>
            <textarea class="form-control" id="desc" name="desc" rows="3" v-model="services.desc"></textarea>
        </div>

        <div class="d-flex flex-row hour-price" v-if="hourAndPrice">
            <div class="form-group">
                <input type="number" name="hours" class="form-control" @click="fixedPrice = false" id="hours" placeholder="Hours" v-model="services.hours">
            </div>
            <div class="form-group">
                <input type="number" name="price" class="form-control" @click="fixedPrice = false" id="price" placeholder="Price" v-model="services.price">
            </div>
        </div>

         <div class="d-flex flex-row fixed-price" v-if="fixedPrice">
            <div class="form-group">
                <input type="number"  @click="hourAndPrice = false" name="fixed_price" class="form-control" id="price" placeholder="Enter fixed price" v-model="services.fixed_price">
            </div>
        </div>
        
        <input type="submit" value="Add Service" class="btn btn-primary"> 

        <div class="btn-toolbar d-flex justify-content-end">
            <a href="#" class="btn btn-info">Services</a>
        </div>
    </form>
</div>
</template>


<script>

export default {
    
    data(){
        return {
            //vendors: this.vendors,
            //projects: this.projects,
            hourAndPrice: true,
            fixedPrice: true,
            services: [],
            errors: [],

            services: {
                name: null,
                vendor: null,
                desc: null,
                hours: null,
                price: null,
                fixed_price: null
            }
        }
    },
    methods: {
        addService(){

            let ok = ''

            if(this.services.name && this.services.vendor){
                ok = true
            }

            if(!this.services.name){
                this.errors.push('Service name is required')
            }

            if(!this.services.vendor){
                this.errors.push('Vendor ID is required')
            }

            if(ok) {
                axios.get('/sanctum/csrf-cookie').then(response => {
                    axios.post('/api/services', {
                        name: this.services.name,
                        vendor: this.services.vendor,
                        desc: this.services.desc,
                        hours: this.services.hours,
                        price: this.services.price,
                        fixed_price: this.services.fixed_price,
                    })
                    .then(function (response) {
                        console.log(response)
                        window.location.href = '/admin/services';
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                });
            }
        },
        loadServices: function(){
            axios.get('/api/services/getservicedata')
                .then(response => {
                    this.services = response.data;
                })
                .catch(function(error){
                    console.log(error);
                });
        }
    },
    mounted(){
        console.log('Successfully mounted!');
        this.loadServices()
    }
}

</script>