VueCompilerError：非法标签名称。使用'<' to print '<'

Question

我正在将 Vue 2 应用程序迁移到 Vue 3，并使用 [email protected] 和 vue/[email protected] 以及 compatConfig MODE=2。

出现如下错误

ERROR in ./resources/src/views/app/pages/transfers/edit_transfer.vue?vue&type=template&id=09285268 (./node_modules/laravel-mix/node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/templateLoader.js??clonedRuleSet-30!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[54].use[0]!./resources/src/views/app/pages/transfers/edit_transfer.vue?vue&type=template&id=09285268)
Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):

VueCompilerError: Illegal tag name. Use '&lt;' to print '<'.
at /Users/resources/src/views/app/pages/transfers/edit_transfer.vue:721:66
376|                        v-model.number="detail.tax_percent"
377|                        :state="getValidationState(validationContext)"
378|                        aria-describedby="OrderTax-feedback"
   |                                           ^
379|                      ></b-form-input>
380|                    </b-input-group>
SyntaxError: 
VueCompilerError: Illegal tag name. Use '&lt;' to print '<'.
at /Users/resources/src/views/app/pages/transfers/edit_transfer.vue:721:66
376|                        v-model.number="detail.tax_percent"
377|                        :state="getValidationState(validationContext)"
378|                        aria-describedby="OrderTax-feedback"
   |                                           ^
379|                      ></b-form-input>
380|                    </b-input-group>

请帮助如何清理这个项目。谢谢

Answer 1

        <!-- Tax Rate -->
        <b-col lg="12" md="12" sm="12">
          <Field
            name="Order Tax"
            :rules="{ required: true , regex: /^\d*\.?\d*$/}"
            v-slot="validationContext"
          >
            <b-form-group :label="$t('OrderTax') + ' ' + '*'">
              <b-input-group append="%">
                <b-form-input
                  label="Order Tax"
                  v-model.number="detail.tax_percent"
                  :state="getValidationState(validationContext)"
                  aria-describedby="OrderTax-feedback"
                ></b-form-input>
              </b-input-group>
              <b-form-invalid-feedback id="OrderTax-feedback">{{ validationContext.errors[0] }}</b-form-invalid-feedback>
            </b-form-group>
          </Field>
        </b-col>