webpack打包后该如何访问项目？

一、问题描述

开发环境，页面浏览都OK，产出文件后，直接打开产出目录的index.html，页面空白。

二、预期结果

能正常看到页面。

三、问题分析

你可能会在编译的最后看到如下一句话：

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

资源引用路径错误造成的，因为整个项目是用vue搭建渲染的，资源引用不到，页面自然出不来。

四、解决方案

1、不修改产出后的index.html资源路径

因为vue-cli的默认配置中, publishPath是用绝对目录, 所以dist文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的话, 可以在npm run build后，选择下面一种方式访问生产环境。

A、http-server

# 进入dist产出目录
cd dist

# 全局安装http-server
sudo cnpm install -g http-server

# 开启服务
hs

访问http://127.0.0.1:8080，即可。

B、nginx
把nginx的配置文件的目录指向dist所在目录，注意访问权限，重启nginx，访问http://127.0.0.1:8080，即可。

2、修改产出后的index.html资源路径

不用安装服务器，不用安装工具包，只要把产出后的index.html文件资源路径前面的'/'去掉，就O了。