vue本地打开build后生成的dist文件夹index.html问题

针对“vue本地打开build后生成的dist文件夹index.html问题”，这里提供一份完整攻略，以下是具体步骤：

1. 构建vue项目

首先需要以vue-cli工具构建一个基本的vue项目。打开终端，输入以下命令：

vue create my-project

其中my-project是你项目的名称，你也可以用其他的名称。

完成之后，进入项目文件夹：

cd my-project

2. 打包项目

接下来需要打包vue项目，将代码编译成可静态部署的文件。在终端输入以下命令：

npm run build

此命令将会执行构建过程，并生成一个名为dist的文件夹，其中包含了编译后的代码。

3. 进入dist文件夹

进入dist文件夹，此时可以看到一个名为index.html的文件。

对于这种情况，通常我们需要使用一个服务器来运行这个HTML文件。可以使用Python内置的SimpleHTTPServer来快速启动一个本地的服务器。

在终端输入以下命令：

cd dist
python -m SimpleHTTPServer

此时，终端会显示一个网址，访问该网址即可访问本地服务器，也就可以通过index.html查看我们构建出来的vue项目了。

示例说明

下面通过两个示例来说明如何在本地打开打包后的vue项目：

示例1. 使用VS Code的Live Server插件

如果你使用的是VS Code编辑器，可以安装一个Live Server插件，这个插件可以帮助你快速地在本地启动一个静态服务器。

安装完成后，右键单击index.html文件，选择“Open with Live Server”，即可启动本地服务器，访问http://localhost:5500即可查看vue项目。

示例2. 使用http-server

http-server是一个简单的零配置命令行HTTP服务器，支持范围请求，自定义404设置等常见的HTTP服务器功能。它可以在不需要安装任何库或框架的情况下，快速启动本地服务器。

在终端输入以下命令来安装http-server：

npm install http-server -g

安装完成后，进入dist文件夹，输入以下命令来启动http-server：

cd dist
http-server

终端会输出本地服务器的地址，访问该地址即可查看vue项目。