如何在Jeesite的html中直接使用由vue写的html，不再被Jeesite默认解析直接加载html文件

### 是什么问题、该问题是怎么引起的？

1. 如何在Jeesite的html中直接使用由vue写的html，不再被Jeesite默认解析直接加载html文件

### 重现步骤、期望结果、截图、代码

1. 
```
这里贴你的代码块
````<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷调查模板</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

.survey-container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

.section-nav {
            width: 200px;
            position: sticky;
            top: 20px;
            align-self: flex-start;
            margin-right: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            max-height: calc(100vh - 40px);
            overflow-y: auto;
        }

.section-nav-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

.section-nav-item {
            padding: 8px 5px;
            margin-bottom: 5px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

.section-nav-item:hover {
            background-color: #e0e0e0;
        }

.section-nav-item.active {
            background-color: #4CAF50;
            color: white;
        }

.survey-content {
            flex: 1;
        }

.question {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 5px;
            background-color: #fff;
        }

.question-header {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
        }

.question-number {
            color: red;
            margin-right: 5px;
        }

.question-title {
            margin: 0;
            font-size: 16px;
            font-weight: normal;
        }

.question-type {
            color: red;
            font-size: 14px;
            margin-left: auto;
        }

.options {
            margin-top: 10px;
        }

.option {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

.option label {
            margin-left: 8px;
            cursor: pointer;
        }

.other-input {
            margin-left: 10px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 200px;
        }

.number-input {
            width: 100px;
            padding: 5px;
            margin-right: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

textarea {
            width: 100%;
            min-height: 100px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
        }

button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 20px;
        }

button:hover {
            background-color: #45a049;
        }

.result {
            margin-top: 20px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }

.error-message {
            color: red;
            font-size: 14px;
            margin-top: 5px;
        }

/* .exclusive-option {
            font-style: italic;
            color: #e74c3c;
        } */

.section-title {
            margin-top: 30px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #4CAF50;
            color: #333;
            font-size: 20px;
        }
    </style>
</head>

<div class="section-nav">
            <div class="section-nav-title">章节导航</div>
            <div v-for="(section, index) in sections" :key="'nav-'+index" class="section-nav-item"
                :class="{ active: currentSectionIndex === index }" @click="scrollToSection(index)">
                {{ section.title }}
            </div>
        </div>

<div class="survey-content">
            <h1>{{ surveyTitle }}</h1>

<div v-for="(section, sectionIndex) in sections" :key="'section-'+sectionIndex"
                :id="'section-'+sectionIndex" ref="sectionRefs">
                <h2 class="section-title">{{ section.title }}</h2>

<div v-for="(question, index) in section.questions" :key="index" class="question"
                    :data-question-id="question.orderNum" v-if="isQuestionVisible(question.orderNum)">
                    <div class="question-header">
                        <span class="question-number" v-if="question.required">*</span>
                        <h3 class="question-title">{{ question.orderNum }} {{ question.title }}</h3>
                        <span class="question-type">{{ getQuestionTypeText(question) }}</span>
                    </div>

<div v-if="question.type === 'radio'" class="options">
                        <div v-for="(option, optIndex) in question.options" :key="optIndex" class="option">
                            <input type="radio" :id="`radio_${question.orderNum}_${option.orderNum}`"
                                :name="`radio_${question.orderNum}`" :value="option.orderNum.toString()"
                                v-model="answers[question.orderNum].value" @change="handleRadioChange(question, option)"
                                :disabled="lockedQuestions.has(question.orderNum)">
                            <label :for="`radio_${question.orderNum}_${option.orderNum}`">{{ option.label }}</label>
                            <input v-if="option.hasInput" type="text" class="other-input"
                                :placeholder="option.placeholder || '请填写'"
                                v-model="answers[question.orderNum].otherInputs[option.orderNum]"
                                :disabled="answers[question.orderNum].value !== option.orderNum.toString() || lockedQuestions.has(question.orderNum)"
                                @blur="validateQuestion(question)">
                        </div>
                    </div>

<div v-if="question.type === 'checkbox'" class="options">
                        <div v-for="(option, optIndex) in question.options" :key="optIndex" class="option">
                            <input type="checkbox" :id="`checkbox_${question.orderNum}_${option.orderNum}`"
                                :value="option.orderNum.toString()" v-model="answers[question.orderNum].values"
                                @change="handleCheckboxChange(question, option)"
                                :disabled="lockedQuestions.has(question.orderNum) || 
                                              (hasExclusiveSelected(question) && !option.exclusive && 
                                               !answers[question.orderNum].values.includes(option.orderNum.toString()))">
                            <label :for="`checkbox_${question.orderNum}_${option.orderNum}`"
                                :class="{ 'exclusive-option': option.exclusive }">
                                {{ option.label }}{{ option.exclusive ? '' : '' }}
                            </label>
                            <input v-if="option.hasInput" type="text" class="other-input"
                                :placeholder="option.placeholder || '请填写'"
                                v-model="answers[question.orderNum].otherInputs[option.orderNum]"
                                :disabled="!answers[question.orderNum].values.includes(option.orderNum.toString()) || lockedQuestions.has(question.orderNum)"
                                @blur="validateQuestion(question)">
                            <span v-if="option.hasInput && option.unit">{{ option.unit }}</span>
                        </div>
                    </div>

<div v-if="question.type === 'number'" class="options">
                        <div class="option">
                            <span v-if="question.prefix">{{ question.prefix }}</span>
                            <input type="number" class="number-input" v-model="answers[question.orderNum].value"
                                :min="question.min" :max="question.max" @blur="validateQuestion(question)"
                                :disabled="lockedQuestions.has(question.orderNum)">
                            <span>{{ question.unit }}</span>
                        </div>
                    </div>

<div v-if="question.type === 'mixed'" class="options">
                        <div class="option">
                            <span v-if="question.prefix">{{ question.prefix }}</span>
                            <input type="text" class="number-input" v-model="answers[question.orderNum].value"
                                @blur="validateQuestion(question)" :disabled="lockedQuestions.has(question.orderNum)">
                            <span>{{ question.unit }}</span>
                        </div>
                    </div>

<div v-if="question.type === 'text'" class="options">
                        <textarea v-model="answers[question.orderNum].value"
                            :placeholder="question.placeholder || '请输入'" @blur="validateQuestion(question)"
                            :disabled="lockedQuestions.has(question.orderNum)"></textarea>
                    </div>

<p v-if="validationErrors[question.orderNum]" class="error-message">
                        {{ validationErrors[question.orderNum] }}
                    </p>
                </div>
            </div>
            <button @click="submitSurvey">提交问卷</button>
        </div>
    </div>

<script src="vue.js"></script>
    
    <script src="survey.js"></script>
</body>

</html>`

### 实际结果、报错信息、截图

1. 
```
这里贴错误信息
````>>04:04:54：表达式值为空(NULL)：question.orderNum 位于211行 资源：/modules/pj/../../iedc/pj/pjOrderDetailCommon.html
空指针
208|                 
209|                 <div v-if="question.type === 'radio'" class="options">
210|                     <div v-for="(option, optIndex) in question.options" :key="optIndex" class="option">
211|                         <input type="radio" :id="`radio_${question.orderNum}_${option.orderNum}`"
212|                                :name="`radio_${question.orderNum}`" :value="option.orderNum.toString()"
213|                                v-model="answers[question.orderNum].value" @change="handleRadioChange(question, option)"
214|                                :disabled="lockedQuestions.has(question.orderNum)">
  ========================
  调用栈:
  /modules/pj/../../iedc/pj/pjOrderDetailCommon.html 行：211
  /modules/pj/pjAnswerSheetDetail.html 行：16
] with root cause`

### 环境版本：

- JDK版本：1.8
- 浏览器版本：Chrome  135.0.7049.96
- 平台版本：JeeSite 5.6.1

卓源软件/JeeSite V5.x

Content Risk Flag

Comments (1)

卓源软件/JeeSite V5.x .gitee-modal { width: 500px !important; }

Content Risk Flag