javascript - 为什么我的 Vue JS 应用程序在 prod 服务器中崩溃但在 dev 中运行良好？

Question

我已经在开发服务器中多次运行我的 Vue JS 应用程序，并且从未遇到过任何功能的单一问题。但是，一旦我在生产服务器中部署我的应用程序，除此特定折扣功能之外的所有内容都会导致我的系统崩溃。

因此，在选择其中一个选项（金额或百分比）后，只要我在输入框中输入值，我的应用程序就会停止工作。

我对网络应用程序开发仍然很陌生，所以如果有人能帮助我解决这个问题，那就太好了。TIA

这是我用来计算折扣的函数：

applyDiscount(){
           this.balance=this.totalCost-this.totalPaid
        
            if(this.isPercentage=='Percentage'){               
                if(this.discountAmount<=100 ){                    
                this.discount=(this.totalCost/100)*this.discountAmount
                this.form.discount=this.discount
                this.str=""          

                    if(this.discount<=this.totalCost-this.totalPaid){
                        this.adjustment=this.totalCost-this.discount
                        this.balance=this.balance-this.discount
                        this.str=""
                    }
                    else{
                        this.str="Discount amount exceeding balance"                     
                    }                  
                }
                else{
                    this.str="Percentage is exceeding 100%"                     
                }  

            }else if(this.isPercentage=='Amount'){
                this.str=""
                this.discount=this.discountAmount
                this.form.discount=this.discount

                if(this.discount<=this.totalCost-this.totalPaid){
                    this.adjustment=this.totalCost-this.discount
                    this.balance=this.balance-this.discount
                    this.str=""

                    }
                    else{
                        this.str="Discount amount exceeding balance"                        
                    } 
            }
        },

此模板代码：

 <!--discount-->

                <form @submit.prevent>
                    <div class="tracking-widest text-lg text-left title-font font-bold text-gray-500  border-b border-gray-300 ">
                    Discount: 
                    </div>
                     <!--discount-->
                <div class="inline-flex items-center mt-3 ">

                <label for="" class="mb-3 text-gray-800">Give discount in?</label>

                <input type="radio" name="test_id" @change="onChange($event)" value="Amount" class="form-radio h-5 w-5 text-indigo-600 mr-2" ><span class="ml-2 mr-2 text-gray-700">Amount</span>
                <input type="radio" name="test_id" @change="onChange($event)" value="Percentage" class="form-radio h-5 w-5 text-indigo-600 mr-1"><span class="ml-2 mr-2 text-gray-700">Percentage</span>
                
                </div>
            
                <div class="flex justify-start">
                    <div class="">
                        <label class="text-gray-700 dark:text-gray-200" for="discount">Discount Amount</label>
                        <input  @keypress="isNumber($event)" v-model.number="discountAmount" id="discount" type="text"
                            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                    </div>                        
                </div>
                <div>{{this.applyDiscount()}}</div>

                <!--discount-->


        <div v-if="this.str.length>=1">


                        <div class=" flex items-center mt-10 px-8">
                            <svg class="h-6 w-6 fill-current text-red-400 mr-4" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 20 20">
                                <path
                                    d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
                                </svg>
                            <div>
                                <p class="font-medium text-red-500">{{str}}</p>

                            </div>

                        </div>

                    </div>
               


              


            <!--after discount-->

            <div class="flex justify-end items-end ml-6"  >
                    <div class=" mt-5  w-full sm:w-2/4 lg:w-1/4">
                        <div class=" justify-between mb-3">
                            <div class="text-gray-400 text-md flex font-bold uppercase  "><span
                                    class="ml-5 mt-2">Total Cost:</span> <span
                                    class="text-lg rounded ml-2 text-gray-500 "><span class="text-xl" >&#2547;{{this.totalCost}}</span></span> </div>
                            <div class=" w-40">
                                <div class="text-gray-800 font-medium" x-html="netTotal"></div>
                            </div>
                        </div>
                        <div class=" justify-between mb-3">
                            <div class="text-gray-400 text-md flex font-bold uppercase "><span
                                    class="ml-5 mt-2">Total Paid:</span> <span
                                    class="text-lg rounded ml-2 text-gray-500 "><span class="text-xl" >&#2547;{{this.totalPaid}}</span></span> </div>
                            <div class=" w-40">
                                <div class="text-gray-800 font-medium" x-html="netTotal"></div>
                            </div>
                        </div>
                        <div class=" justify-between mb-3">
                            <div class="text-gray-400 text-md  flex font-bold uppercase "><span
                                    class="ml-5 mt-2">Discount:</span> <span
                                    class="text-lg  ml-2 text-gray-600"><span class="text-xl" >&#2547;{{this.discount}}</span></span> </div>
                            <div class=" w-40">
                                <div class="text-gray-800 font-medium" x-html="netTotal"></div>
                            </div>
                        </div>
                        <div class=" justify-between mb-3">
                            <div class="text-gray-400 text-md  flex font-bold uppercase "><span
                                    class="ml-5 mt-2">Adjustment:</span> <span
                                    class="text-lg  ml-2 text-gray-600"><span class="text-xl" >&#2547;{{this.totalCost-this.discount}}</span></span> </div>
                            <div class=" w-40">
                                <div class="text-gray-800 font-medium" x-html="netTotal"></div>
                            </div>
                        </div>
                        <div class=" justify-between mb-3">
                            <div class="text-gray-400 text-md flex font-bold uppercase "><span
                                    class="ml-5 mt-2">Balance:</span> <span
                                    class="text-lg  ml-2 text-gray-600"><span class="text-xl" >&#2547;{{this.balance}}</span></span> </div>
                            <div class="w-40">
                                <div class="text-gray-800 font-medium" x-html="netTotal"></div>
                            </div>
                        </div>
                    </div>
            </div>
        </form>            
    <!--form-->
    </div>
</div>
    <!--discount-->

我有点发布所有这些，因为我真的无法弄清楚问题是什么。

标签： javascriptvue.jsvue-componentweb-frontenddev-to-production