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

r囧r小猫 2021-09-07 06:04 2057阅读 0赞

## 1.问题由来 ##

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

根据以下命令对项目进行打包： 
    
    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

**于是我进了官网查看文档**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70_pic_center 1]  
**翻译了一下**

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

## 2.解决方法 ##

安装一个服务

执行下面命令：

npm install http-server -g

然后在dist文件下执行：

http-server

最后访问网址即可，我测试时发现如果运行过多个项目，最好是点击第一个网址不然会打开上次的项目  
![在这里插入图片描述][20210122114547507.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/f57ff543c1ac409184c5b71e90343c2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwODY0OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/e7234836d35a445d83dec0b2257a07b6.png
[20210122114547507.png_pic_center]: /images/20210813/60c79b0177a44838b515fbf4cf22c831.png