1
我已經咬咬牙，切換到一個模塊化的方法我Vue.js，使用VUE-CLI和的WebPack。將我的應用程序重新構建爲單個文件組件的過程中存在一些學習曲線，但我基本上已經達到了這一目標。儘管如此，我現在遇到了一個非常令人困惑的問題。我有一個相當複雜的組件ProductDetail，它使用了幾個子組件。只要我添加其中一個，稱爲TabPage（通過包含導入行並將其添加到組件屬性），編譯會掛起（如果我重新啓動「npm run dev」，它同樣會在啓動時掛起，然後才能到達它正在服務頁面）。其他6個組件根本不會導致這個問題。組件會導致「新公共管理運行dev的」掛
現在奇怪的是，這個組件，TabPage，可以是有效的空白，只不過是一個輸出空白div的模板，並且問題仍然存在，所以它不能成爲這個組件的問題（除此之外在切換到使用vue-cli之前，一切都在應用程序的版本中工作）。只有這個組件，沒有別的原因導致這個問題。
那麼，有沒有調試的編譯過程，這樣我可以看到恰恰是問題發生的一些手段？
對於它的價值，這裏的產品詳情成分（與方法去除，把一切歸因於大小的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> </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），但這並沒有幫助。
也許：https：//github.com/webpack/webpack-dev-server/issues/128？ –
我根本不使用SASS。不知道如何/在哪裏實現此UV_THREADPOOL_SIZE更改提到。我在dev-server.js腳本中嘗試了'process.env.UV_THREADPOOL_SIZE = 128'，但問題仍然存在。這是一個巨大的阻礙，因爲如果我不能使用這個組件，我就無法取得進一步的進展。 –
您是否注意到您並未關閉最後一個''標籤？ –