一看就懂！Linux服务器部署Springboot+VUE前后端分离式项目

  前后端分离是目前的大趋势了。以前往往是前端打包页面后交给后台放入静态资源文件夹下进行部署，这样子做其实是一个不太聪明的行为。这里就不展开说了。

首先是环境：

后台基于：Springboot2.1.3，Maven3.3.6。

后台服务器：Tomcat

前端基于：Vue2，@vue/cli 4.x

前端服务器：nginx （自行安装）

部署后台项目：

往这戳，部署Springboot项目

 

部署前端项目：

1.vue.config.js

@vue/cli 4.x需要自己手动新建在根目录下即可。

module.exports = {
    //.. 其他省略
    // 设置publicPath
    publicPath: './',
}

2.打包

npm run build

3.打包完后出现dist文件夹。

4.修改dist文件夹下的index.html

将所有的路径前添加 ./ 注意是全部！以下只是示例。

原index.html文件路径前缀是没有./的
<link href=css/app.6bc6c90b.css rel=stylesheet>
添加上./
<link href=./css/app.6bc6c90b.css rel=styles