分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了向生产服务器 Vue.js 添加新组件时出错，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决向生产服务器 Vue.js 添加新组件时出错？

开发过程中遇到向生产服务器 Vue.js 添加新组件时出错的问题如何解决？下面主要结合日常开发的经验，给出你关于向生产服务器 Vue.js 添加新组件时出错的解决方法建议，希望对你解决向生产服务器 Vue.js 添加新组件时出错有所启发或帮助；

我使用 laravel 和 vueJs 部署了一个简单的应用程序。自从部署以来，我不断向应用程序添加更多功能。昨天我更新了生产服务器，添加了新功能，但是 vue 新的 vue 组件似乎不起作用。我收到以下错误。 ** 未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

（在中找到）

** 我已经运行了 npm run dev，npm run production，但仍然无法使其工作。还检查了服务器上存在的文件。它的堰导致它在本地工作，但在生产中它甚至找不到文件。

这是我的 app.Js


require('./bootstrap');

window.Vue = require('vue');




 //const files = require.context('./',true,/\.vue$/i)
 //files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0],files(key).default))

Vue.component('planillae',require('./components/PlanillaExtra.vue').default);
Vue.component('hora',require('./components/Hora.vue').default);
Vue.component('stats',require('./components/Stat.vue').default);
Vue.component('vacation',require('./components/Vacation.vue').default);
Vue.component('vacation-detail',require('./components/VacationDetail.vue').default);
Vue.component('cuadro',require('./components/cuadro.vue').default);
Vue.component('importv',require('./components/importv.vue').default);
Vue.component('atrasada',require('./components/Atrasada.vue').default);
Vue.component('nueval',require('./components/NuevaliquIDacion.vue').default);
Vue.component('detalle',require('./components/Detalle.vue').default);

const app = new Vue({
    el: '#app',});

我的 Vue 文件


<template>
    <div>
        <div class="container-fluID mt--7">
            <div class="row mt-5">
                <div class="col-xl-12 mb-5 mb-xl-0">
                    <div class="card shadow">
                        <div class="card-header border-0">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h2 class="mb-3">Crear liquIDación</h2>
                                </div>
                            </div>
                        </div>
                        <form @submit.prevent="crear_liquIDacion" class="padding-form">
                             <div class="container">
                                 <div class="row">
                                     <div class="col-sm">
                                         <div class="form-group col-auto">
                                             <label for="">SELEccionar empleado</label>
                                               <v-SELEct v-model="data.empleado" :options="empleados" :reduce="empleados => empleados.ID" label="fullname" @input="getSucursal()">
                                                   <template #search="{attributes,events}">
                                                       <input class="vs__search"
                                                       :required="!data.empleado"
                                                       v-bind="attributes" v-on="events">
                                                   </template>
                                               </v-SELEct>
                                             <div v-if="errors && errors.empleado" class="text-danger">{{ errors.empleado[0] }}</div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div class="container">
                                 <div class="row">
                                     <div class="col-sm">
                                         <div class="form-group col-auto">
                                             <label for="">Sucursales</label>
                                              <div v-for="(sucursal,indeX) in sucursales" :key="index">
                                                  <div class="custom-control custom-radio mb-3">
                                                      <input type="radio" name="suc" :ID="`radio-${sucursal.ID}`" v-model="data.sucursal" class="custom-control-input"
                                                      :value="sucursal.ID_sucursal" @input="buscar_fecha(sucursal.ID_sucursal)" required>
                                                      <label :for="`radio-${sucursal.ID}`" class="custom-control-label">{{sucursal.sucursales.nombrE}}</label>
                                                  </div>
                                              </div>
                                                 <div v-if="errors && errors.sucursal" class="text-danger">{{ errors.sucursal[0] }}</div> <br>
                                            <template v-if="msg"> 
                                                 <small v-if="fecha.contrato_inicio">Tenga en cuenta que la fecha de inicio de contrato de este trabajador en este negocio es: {{fecha.contrato_inicio}}</small>
                                                 <small v-else>No hay regístro de inicio de contrato en este negocio</small>
                                            </template>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div class="container">
                                 <div class="row">
                                    <div class="col-sm">
                                        <div class="form-group col-auto">
                                         <label for="">Tipo de liquIDación</label>
                                         <SELEct v-model="data.liquIDacion"  class="form-control form-control-alternative" required>
                                             <option value="">SELEccine una opción</option>
                                             <option v-for="(tips,indeX)  in tipo" :key="index" :value="tips.ID">{{tips.nombrE}}</option>
                                         </SELEct>
                                     </div>
                                    </div>
                                 </div>
                             </div>

                             <div class="container text-center">
                                 <button class="btn btn-priMary">Crear liquIDación</button>
                             </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import vSELEct from 'vue-SELEct';
import "vue-SELEct/dist/vue-SELEct.CSS";
export default {
name: "nueval",data() {
       return {
           empleados: [],data: {},sucursales: [],errors: {},msg: null,fecha: {},tipo: []
       }
    },mounted(){
      this.obtener_data();
      this.obtener_tipo();
    },methods: {
        crear_liquIDacion()
        {
             axios.post("/liquIDaciones/generar-liquIDacion",this.data).then(resp => {
                  window.LOCATIOn.href = "/liquIDaciones/agregar-detalles/" + resp.data;
             }).catch(error => {
                 console.log(error);
             })
          
        },obtener_tipo(){
            axios.get("/liquIDaciones/obtener-tipo").then(response => {
                this.tipo = response.data;
            })
         },obtener_data()
        {
            axios.get("/vacaciones/create-vue").then(response => {
                this.empleados = response.data;
                this.empleados.map(function(X){
                    return x.fullname = x.cedula + "," + x.nombre + " " + x.apellIDo;
                });
            });
        },getSucursal()
        {
            this.msg = false;
            this.sucursales = null;
            if(this.data.empleado)
            {
                axios.get("/vacaciones/getNegocios/" + this.data.empleado)
                .then(resp => {
                   this.sucursales = resp.data;
                });
                this.sucursales = null;
            
            }
        },buscar_fecha(sucursal)
        {
            axios.post("/vacaciones/vacaciones-buscar-fecha",{
                sucursal: sucursal,empleado: this.data.empleado
            }).then(resp => {
                this.msg  = true;
                this.fecha = resp.data;
            }).catch(error => {
                console.log(error.responsE);
            })
        }
    },components: {
        vSELEct
    }
}
</script>

我的 package.Json

{
    "private": true,"scripts": {
        "dev": "npm run development","development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.Js --progress --config=node_modules/laravel-mix/setup/webpack.config.Js","watch": "npm run development -- --watch","watch-poll": "npm run watch -- --watch-poll","hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.Js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.Js","prod": "npm run production","production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.Js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.Js"
    },"devDependencIEs": {
        "axios": "^0.19","bootstrap": "^4.0.0","cross-env": "^7.0","jquery": "^3.2","laravel-mix": "^5.0.1","lodash": "^4.17.19","popper.Js": "^1.12","resolve-url-loader": "^2.3.1","sass": "^1.20.1","sass-loader": "^8.0.0","vue": "^2.6.12","vue-template-compiler": "^2.6.10","vue-Js-modal": "^2.0.0-rc.6","vue-multiSELEct": "^2.1.6","vue-SELEct": "^3.11.2"
    },"dependencIEs": {
       
    }
}