前言

今天准备调试自己写的SpringBoot后端api，打开之前部署在SpringBoot上的Vue.js前端页面时，发现是一整个空白的页面，由于自己刚接触SpringBoot和Vue.js前后端分离的开发模式，相关经验较少，在此记录自己的解决过程。

利用Chrome浏览器，按下f12打开控制台发现以下错误：文件路径错误

文件路径错误，导致css、js等文件获取不到，所以导致的页面的空白。

为什么会找不到文件呢？打开Vue项目下的dist目录，发现文件是存在的。

经过Goole查找相关资料和查阅Vue.config.js的官方配置参考后发现publicPath参数：

由于没有配置publicPath参数，所以默认的路径为绝对路径，导致引用资源文件时使用的也是绝对路径，所以也就渲染不了页面，最终显示为空白页。

在vue.config.js文件中将publicPath参数设置为相对路径，这样打出来的包可以被部署在任意路径了。

module.exports = {
    publicPath: "./",
    assetsDir: "./static",
}

由于后端使用了Spring Security作权限管理，为了方便管理路径的权限，这里我还顺便配置了assetsDir参数，这参数是用来指定打包后的静态资源文件的位置的。 修改，保存后执行打包构建。

vue-cli-service build

打包完成后的目录：

打开index.html 页面正常地显示了。

参考： vue.config.js配置参考