解决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项目访问成功了!