作为前端开发，通常需要在项目打包后查看打包后的效果，如果直接点击打包后的index.html文件，页面极大可能性是空白的，看不到效果的，因此，在此列举通过http-server查看打包后的效果

目录

一、准备工作

二、项目根目录文件展示

三、打包后的dist文件目录

四、直接双击dist目录中的index.html的页面效果及控制台的错误信息

五、解决问题步骤

1、在dist目录直接输入 cmd

2、按压回车键

3、安装http-server

4、启动http-server，端口号自拟

5、在浏览器中输入可运行地址

欢迎关注VX公众号：前端小知识营地

---

一、准备工作

由于http-server是依赖Node的，但作为前端开发，通常都有Node环境，在此就不展示如何安装Node的相关步骤了，如有需要，请看这里Node.js 下载安装环境配置 - 图文版_node下载安装-CSDN博客

二、项目根目录文件展示

三、打包后的dist文件目录

四、直接双击dist目录中的index.html的页面效果及控制台的错误信息

五、解决问题步骤

1、在dist目录直接输入 cmd

2、按压回车键

3、安装http-server

npm install http-server -g

4、启动http-server，端口号自拟

http-server -p 8000

5、在浏览器中输入可运行地址

• 使用IP为http://192/168.的地址

• 使用http://127.0.0.1:8000的地址

欢迎关注VX公众号：前端小知识营地