请查找以下有错误的详细信息。
错误详细信息：未能编译。
/src/components/Header.vue模块错误(来自./node_modules/eslin-loader/index.js(：
H： \project\VueProjects\stock-trader\src\components\Header.vue27:2错误混合空格和制表符没有混合空格和选项卡
✖1个问题(1个错误，0个警告(
标题.vue
<template>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<router-link to="/" class="navbar-brand">Stock Trader</router-link>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<router-link to="/portfolio" activeClass="active" tag="li"
><a>Portfolio</a></router-link
>
<router-link to="/stocks" activeClass="active" tag="li"
><a>Stocks</a></router-link
>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">End day</a></li>
<li class="dropdown">
<a
href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>Save & Load <span class="caret"></span
></a>
<ul class="dropdown-menu">
<li><a href="#">Save Data</a></li>
<li><a href="#">Load Data</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</template>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Stock Trader</title>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"/>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
在此处输入图像描述
请告知。
解决第一个查询后编辑的部分。
所需结果屏幕截图在此处输入图像描述
结果获取屏幕截图在此处输入图像描述
像VS代码这样的编辑器可以选择将所有空格转换为制表符或空格，这将防止您的节点包管理器构建抱怨混合的空格编码(制表符与空格(。试着点击VS代码右下角的"选择缩进"，或者为你正在使用的任何编辑器寻找(或谷歌(一个选项，将所有空格转换为空格或制表符。