解决vue-cli项目build打包后，index.html首页空白问题

一、遇到问题

我们将build打包好的dist文件夹放到 tomcat 的 webapps 文件夹目录下,然后通过 http://localhost:8088/dist/ 进行访问，然后发现显示的是一个空白页，一些静态资源都是 404。如下图：

二、解决方法

1、通过F12 调试中看出来都是绝对路径的原因，我们先来查看index.html 页面的源代码，如下图：

解析： index.html源代码中 “/static/js/app.5b1431e30b9e6671cfc1.js” 引用的是绝对路径，这就导致了在 tomcat 去访问index.html 页面时报404。我们需要将路径变成相对路径“./static/js/app.5b1431e30b9e6671cfc1.js”，我们在路径前面多加一个点，这个很关键!

 2、把绝对路径都改成相对路径后，再来重新访问 http://localhost:8088/dist/ 

从上图可以看到，vue-cli项目访问成功了！