本地如何访问vue2 生成的dist代码

前言

当你使用 Vue CLI 或其他构建工具构建 Vue 2 项目时，它会生成一个 dist 文件夹，这个文件夹包含了你项目的生产环境版本的静态资源文件（HTML、JavaScript 和 CSS）。

直接打开 dist 文件夹中的 index.html 文件在某些情况下是可以的，但是由于浏览器的安全限制，特别是当你的应用需要从本地加载资源或与本地API交互时，这种方式可能会导致问题。

一般情况下，直接打开 dist 或 build 目录下的 index.html会在浏览器看到内容。

然而发现网页一片空白，打开了控制台，看到一片404的各种找不到资源，或者出现跨域的提示

使用HTTP服务器

npm 安装 http-server 包来快速创建一个本地服务器：

npm install -g http-server
cd path/to/your/dist
http-server

然后，打开浏览器并访问 http://127.0.0.1:8080（端口号可能根据命令行输出有所不同）。

使用live-server插件

全局安装live-server插件

npm install -g live-server

在dist 或 build文件夹（刚刚打包成功后多出来的文件夹）终端输入

live-server

默认监听在8080端口，打开浏览器，输入 localhost:8080 就可以预览了