14- 通过打出来的包分析publicPath的' / ' 和 ' ./ '的区别

新起了一个项目，用于做打包和发npm包，最后打出来的包肯定为dist，按理说在dist中的index.html本地打开也能看到页面（静态资源文件）

结果本地打开是个白页。

我们先看一下空白页的时候，通过浏览器的网络中看一下静态资源css，js这些的引入路径是什么样子的：

我们发现加载的这个css路径貌似有问题，怎么是F盘下面css文件夹下的这个css文件呢？肯定不对

我说一下为什么不对，你这个本地打开，要想找到这个css并加载出来，你肯定得有个完整路径，在电脑中加载的这个路径是：

F:\my-npm\drag-split-layout\dist\css

 你怎么能直接去F盘下直接去找css这个文件夹呢？

这就印出来了主角 publicPath了，默认情况下，publicPath的值是 “ / ”，它代表直接挂载到根目录，这里要引入的css的根目录还就是其所在的F盘，没毛病，所以找不到。

那么怎么才能找到正确的引入路径呢？

我们需要在vue.config.js文件中加入：

 让其变成相对路径即可，相对路径的话就可以挂载到任何文件夹下面。

然后我们重新npm run build 进行打包，再在打包出来的dist中再本地运行index.html文件；

这次就能看到页面了，为了验证，我们再次打开浏览器的网络，还去查看这个css的引入路径：

 正如我们前面分析的那样，它在本地找到了正确的文件路径，所以就能正常显示页面了。

当然了，这都是基于路由处在hash模式下，官网也说了，如果在history模式下，需要在nginx上进行配置。

具体可看vue官网对publicPath的介绍