vue打包后html无法运行，正确运行方法

1.问题由来

经常写vue项目但是很少发布部署，一般都是本地运行测试练习用，这次打包后想直接运行到浏览器却发现报错了。这使我百思不得其解明明运行测试都没有问题，为什么打包运行却不行呢？百度了很久都没有解决，最后终于注意到了打包完成后的两句英文提示。

提示

根据以下命令对项目进行打包： 

npm run build
 命令执行完出现

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

于是我进了官网查看文档

翻译了一下

dist目录是由HTTP服务器提供的(除非你将publicPath配置为一个相对值)，
所以如果你直接通过file://协议打开dist/index.html，它将不起作用。
例如，在本地预览生产版本的最简单方法是使用Node.js静态文件服务器

2.解决方法

安装一个服务

执行下面命令：

npm install http-server -g 

然后在dist文件下执行：

http-server

最后访问网址即可，我测试时发现如果运行过多个项目，最好是点击第一个网址不然会打开上次的项目