组件导致npm run dev'挂起

时间:2017-01-30 16:52:56

标签: node.js vue.js webpack-dev-server

我已经咬了一下子弹,并使用vue-cli和Webpack切换到我的Vue.js的模块化方法。将我的应用程序重组为单个文件组件有一点学习曲线,但我基本上已经到了那里。不过,我现在遇到了一个非常令人费解的问题。我有一个相当复杂的组件ProductDetail,它使用了一些子组件。一旦我添加其中一个,称为TabPage(通过包含导入行并将其添加到components属性),编译就会挂起(如果我重新启动' npm run dev'它同样会在启动时挂起,之前到达服务页面的地步)。其他6个组件根本不会引起这个问题。

现在奇怪的是,这个组件TabPage可以有效地为空,只不过是输出空div的模板,问题仍然存在,因此它不会成为这个组件的问题(在我切换到使用vue-cli之前,一切都在应用程序的版本中工作。并且它只是这个组件,没有其他因素导致这个问题。

那么是否有一些调试编译过程的方法,以便我可以准确地看到问题发生的位置?

对于它的价值,这里是ProductDetail组件(移除了方法,将其全部缩小到StackOverflow的大小):

<template>
    <div class="container edit-product">
        <ul class="nav nav-tabs">
            <tab-link page="Product"></tab-link>
            <tab-link page="Pricing"></tab-link>
            <tab-link page="History"></tab-link>
            <tab-link page="Shop"></tab-link>

        </ul>

        <div class="tab-content">

            <tab-page page="Product">
                <form @submit.prevent.stop class="edit-form">
                    <div class="form-fields">
                        <common-header :product="this.product" :error="this.error"></common-header>

                        <div class="row">
                            <cell :cols="8"><text-field name="name" v-model="product.name"/></cell>
                            <cell :cols="1"><text-field name="pack" v-model.number="product.pack" format="numeric"/></cell>
                            <cell :cols="3"><text-field name="size" v-model="product.size"/></cell>
                        </div>

                        <div class="row">
                            <cell :cols="2">

                                <text-field name="code" v-model="product.code" :attrs="{maxlength: 5}">
                                    <button slot="after" type="button" class="btn btn-sm fld-btn" @click="seeExisting">Existing</button>
                                </text-field>

                            </cell>
                            <cell :cols="2">

                                <text-field name="supplierCode" v-model="product.supplierCode">
                                    <button slot="after" type="button" class="btn btn-sm fld-btn" @click="selectSupplier">Select</button>
                                </text-field>

                            </cell>
                            <cell :cols="5">

                                <text-field name="supplierName" v-model="product.supplierName" :attrs="{disabled: true}"/>

                            </cell>

                            <cell :cols="3">

                                <text-field label="Supplier's Product Code" name="supplierProdCode" v-model="product.supplierProdCode"/>

                            </cell>


                        </div>
                        <div class="row">
                            <cell :cols="6">

                                <text-field name="categorization" v-model="categorization" :attrs="{disabled: true}">
                                    <button slot="before" type="button" class="btn btn-sm fld-btn" @click="categorize">Set</button>
                                </text-field>

                            </cell>
                            <cell :cols="6">

                                <text-field name="tradeName" v-model="product.tradeName"/>

                            </cell>
                        </div>
                        <div class="row">
                            <cell :cols="12">
                                <checkbox-field inline="true" name="readyPacked" label="Ready-Packed" v-model="product.readyPacked"></checkbox-field>

                                <checkbox-field inline="true" name="shop" v-model="product.shop"></checkbox-field>

                                <checkbox-field inline="true" name="organic"  v-model="product.organic"></checkbox-field>

                                <checkbox-field inline="true" name="withSugar" v-model="product.withSugar"></checkbox-field>

                                <checkbox-field inline="true" name="stockControlled" label="Stock-controlled" v-model="product.stockControlled"></checkbox-field>

                                <checkbox-field inline="true" name="vegan" v-model="product.vegan"></checkbox-field>

                                <checkbox-field inline="true" name="fairTrade" v-model="product.fairTrade"></checkbox-field>

                                <checkbox-field inline="true" name="glutenFree" label="Gluten-free" v-model="product.glutenFree"></checkbox-field>

                            </cell>
                        </div>
                        <div class="row">
                            <cell :cols="1">
                                <text-field name="aisle" v-model="product.aisle" :attrs="{maxlength: 2}" format="uppercase"/>
                            </cell>
                            <cell :cols="1">
                                <text-field name="bay" v-model="product.bay" :attrs="{maxlength: 2}" format="uppercase"/>
                            </cell>
                            <cell :cols="1">
                                <text-field name="shelf" v-model.number="product.shelf" :attrs="{maxlength: 2}" format="integer"/>
                            </cell>
                            <cell :cols="2">
                                <text-field type="select" name="squashiness" v-model="product.squashiness" :options="['Bags','Bottles','Boxes','Sacks','Delicates','Prepacks','Split Cases']"/>
                            </cell>


                        </div>
                        <div class="row">
                            <cell :cols="2">
                                <text-field name="identifier" v-model="product.identifier" />
                            </cell>
                            <cell :cols="2">
                                <text-field name="grossWeight" after-class="input-group-addon" label="Gross Weight" v-model="product.grossWeight" format="numeric"><span slot="after">kg</span></text-field>
                            </cell>
                            <cell :cols="2">
                                <text-field name="substituteCode" v-model="product.substituteCode" />
                            </cell>
                            <cell :cols="3">
                                <text-field name="outerCaseBarcode" v-model="product.outerCaseBarcode" format="integer"/>
                            </cell>
                        </div>
                        <div class="row">
                            <cell :cols="12">
                                <text-field type="textarea" name="notes" v-model="product.notes" :attrs="{rows: 1}" />
                            </cell>
                        </div>


                    </div>

                    <div class="row">
                        <cell :cols="12">
                            <button type="button" class="btn btn-sm" @click.prevent="returnToList">Cancel</button>
                            <button type="button" class="btn btn-sm"
                                    @click.prevent="saveAndBack">Save, Back To List</button>
                            <button type="button" class="btn btn-sm btn-primary"
                                    @click.prevent="save">Save and Continue</button>
                        </cell>
                    </div>

                </form>

            </tab-page>


            <tab-page page="Pricing">
                <form class="edit-form">
                    <div class="form-fields">
                        <common-header :product="this.product" :error="this.error"></common-header>
                        <div class="row">
                            <cell :cols="8">
                                <div class="row">
                                    <cell :cols="2">
                                        <text-field type="select" name="basedOn" v-model="product.basedOn" :options="['T','B','C']" :styles="{width:'100%'}"/>
                                    </cell>
                                    <cell :cols="2"><text-field name="priceBase" v-model.number="product.priceBase" format="currency"/></cell>
                                    <cell :cols="2"><text-field name="newPriceBase" v-model.number="product.newPriceBase" format="currency"/></cell>
                                    <cell :cols="2">
                                        <text-field type="select" name="vatRating" v-model="product.vatRating" :options="[{ text: 'Zero', value: '0.00'},{text: 'Reduced', value: '5.00' },{text: 'Standard', value: '20.00'}]" @input="calcRRP"/>
                                    </cell>

                                    <cell :cols="2"><text-field name="price" label="Rainbow Price" v-model.number="product.price" format="currency" :attrs="{disabled:true}"/></cell>
                                    <cell :cols="2"><text-field name="unitPrice" label="Per unit/kg" v-model.number="product.unitPrice" format="currency" :attrs="{disabled:true}"/></cell>
                                </div>
                            </cell>

                        </div>
                        <div class="row">
                            <cell :cols="3">
                                <checkbox-field inline="true" name="hasRRP" label="Has RRP" v-model="product.hasRRP" @input="calcRRP"></checkbox-field>
                                <checkbox-field v-if="product.hasRRP" inline="true" name="useNonFoodRRP" label="Non-food RRP" v-model="product.useNonFoodRRP" @input="calcRRP"></checkbox-field>
                            </cell>

                            <cell :cols="8">
                                <div class="row">
                                    <template  v-if="product.hasRRP">
                                        <cell :cols="2"><text-field name="rrp" label="RRP" v-model.number="product.RRP" format="currency" :attrs="{disabled:true}"/></cell>
                                        <cell :cols="2" ><text-field name="manualRRP" label="Over-ride RRP" v-model.number="product.manualRRP" format="currency"/></cell>
                                    </template>
                                    <cell :cols="6"><text-field name="remark" label="Remark" v-model="product.remark" /></cell>
                                    <cell :cols="2"><button type="button" class="btn btn-sm btn-inline"
                                                            @click.prevent="recalc">Recalculate Now</button></cell>
                                </div>
                            </cell>
                        </div>

                    </div>

                    <button-bar></button-bar>

                </form>

            </tab-page>

            <tab-page page="History">
                <form class="edit-form">

                    <div class="form-fields">
                        <common-header :product="this.product" :error="this.error"></common-header>
                        <button-bar></button-bar>
                    </div>
                </form>

            </tab-page>

            <tab-page page="Shop">
                <form class="edit-form">
                    <div class="form-fields">
                        <common-header :product="this.product" :error="this.error"></common-header>
                        <template v-if="this.product.shop==true">
                            <div class="row">
                                <cell :cols="6">
                                    <button type="button" class="btn btn-sm btn-inline" @click.prevent="addShopLine">Add New</button>
                                </cell>
                                <cell :cols="6" :styles="{'text-align':'right'}">
                                    <button type="button" class="btn btn-sm btn-inline" @click.prevent="autoLabel">Auto Label</button>
                                </cell>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <table id="shop-lines">
                                        <thead>
                                        <tr>
                                            <th>Unit</th>
                                            <th class="price">Price</th>
                                            <th>Variety</th>
                                            <th class="barcode">Barcode</th>
                                            <th>Label</th>
                                            <th>&nbsp;</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="shop-line-row" v-for="(shopLine, index) in this.product.shopLines">
                                            <td><text-field table-cell="true" :name="'unit'+index" type="select" v-model="shopLine.unit"
                                                            :options="['2.5kg','1kg','500g','250g','125g','50g','25g','Unit (Low)','Unit (High)', 'Unit (Non-food)']" :styles="{width:'100%'}" /></td>
                                            <td class="price"><text-field table-cell="true" :name="'price'+index" v-model.number="shopLine.price" format="currency"/></td>
                                            <td><text-field table-cell="true"  :name="'variety'+index" v-model="shopLine.variety"/></td>
                                            <td class="barcode"><text-field table-cell="true" :name="'barcode'+index" v-model.number="shopLine.barcode" format="integer"/></td>
                                            <td><text-field table-cell="true" :name="'label'+index" v-model="shopLine.label"/></td>
                                            <td><button @click.prevent="removeShopLine(index)">X</button></td>

                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="row">
                                <cell :cols="12">
                                    <p>This product is not sold at the shop</p>
                                </cell>
                            </div>
                        </template>
                        <button-bar></button-bar>
                    </div>
                </form>

            </tab-page>
        </div>
    </div>
</template>
<script>
    import bus from '../../bus'
    import TabPage from '../TabPage'
    import TabLink from '../TabLink'    
    import Cell from '../Cell'
    import TextField from '../TextField'
    import CheckboxField from '../CheckboxField'
    import CommonHeader from './CommonHeader'
    import ButtonBar from './ButtonBar'

    export default {

        data() {
            return {
                action:null,
                product: {},
                productCopy:{},
                page:'Product',
                error:"",
                errorField:null,
                validations:{

                }
            }
        },
         components:{
           TabPage,TabLink,Cell,TextField,CheckboxField,CommonHeader,ButtonBar

        },

        watch: {
            '$route' (to, from) {
                this.setAction();

            }
        },

        created () {
            bus.$on('SelectSupplier',  (supplier) =>{
                this.product.supplierCode=supplier.code;
                this.product.supplierName=supplier.name;
            });
            bus.$on('SelectSubcategory', (subcategory)=> {
                this.product.subcategory=subcategory.name;
                this.product.subcategoryId=subcategory.id;
                this.product.category=subcategory.categoryName;
                this.product.categoryId=subcategory.categoryId;

            });

            bus.$on("set-page", (page)=> {
                this.validatePage();
                if (this.error == "") {
                    var currentPage = this.page;
                    this.page = page;
                    bus.$emit("update-page", this.page);
                }

            });

            bus.$on("button-action", (action)=> {
                this[action]();
            });

        },


        mounted(){
            this.setAction();
            if(this.action=="edit"){
                this.buildTitle("Edit Product");
            } else if(this.action=="dupe") {
                this.buildTitle("Duplicate Product");
            } else if(this.action=="create") {
                this.buildTitle("Create Product");
            }
        },

        beforeRouteLeave (to, from, next) {
               if(_.isEqual(this.product, this.productCopy)){
                next();
            } else {
                var self=this;
                bootbox.confirm({
                    message: "Are you sure want to leave the product editor? You will lose any new or changed data",
                    buttons: {
                        confirm: {
                            label: 'Back To List',
                        },
                        cancel: {
                            label: 'Continue Editing',
                        }
                    },
                    callback: function (result) {
                        if(result){
                            next();
                        } else {
                            next(false);
                        }
                    }
                });
            }
        },
        computed: {
            fullName () {
                return this.product.name + ", " + this.product.pack + this.product["size"];
            },
            displayName () {
                if (this.product.code && this.product.code.length == 5) {
                    return this.product.code + ": " + this.fullName;
                } else {
                    return this.fullName;
                }

            },
            categorization (){
                if (this.product.category && this.product.subcategory) {
                    return this.product.category + ": " + this.product.subcategory;
                } else {
                    return "";
                }
            },
            settings(){
                return this.$store.state.settings;
            }
        },

        methods: {

//BUNCH OF METHODS REMOVED HERE TO BRING TEXT SIZE DOWN BELOW 30,000


        }
    }
</script>

这里是完全削减的TabPage组件,它包含在上面的组件中会导致编译挂起:

<script>

export default{

    name:"tab-page",

    template:`<div>EMPTY</div>`

}


</script

我已升级到最新节点(v6.9.4 LTS)但这没有帮助。

1 个答案:

答案 0 :(得分:0)

值得庆幸的是,这个问题并没有出现任何令人费解的晦涩难懂,而是我没有正确关闭脚本标签的简单事实。我觉得很傻,但也松了一口气。感谢Roy J指出这一点。