Vue项目构建生成的`dist`文件夹下的`index.html`文件直接在本地打开时样式混乱

原因

1. 相对路径和绝对路径问题：

构建工具（如Webpack）在打包时，默认会生成相对路径。这在服务器环境下运行良好，但在本地文件系统中直接打开index.html时，路径解析会出问题。

2. 资源文件未加载：

在本地打开时，可能会因为路径问题导致CSS和JavaScript文件未能正确加载，导致样式混乱。

使用HTTP服务器（没有修改index文件中的资源路径直接启动http服务器没有用）：
- 最简单的解决方法是使用一个本地HTTP服务器来打开你的项目。这样可以确保路径解析正确。
- 你可以使用http-server（Node.js包）来快速启动一个本地服务器：
  bash
```
npm install -g http-server
cd dist
http-server
```
  然后在浏览器中访问http://localhost:8080。
配置base选项：
- 在Vue CLI项目中，可以通过修改vue.config.js文件中的publicPath选项来配置资源的路径。例如：
  javascript
```
module.exports = {
  publicPath: './'
};
```
  这样会确保生成的资源路径是相对的，并且可以在本地文件系统中正确解析。
手动修改路径：
- 如果不使用HTTP服务器，可以手动修改生成的index.html文件中的资源路径，使其适应本地文件系统。例如：
  html
```
<link href="./css/app.12345678.css" rel="stylesheet">
<script src="./js/app.12345678.js"></script>
```