vue-cli与springboot直接打包部署服务器流程

最新推荐文章于 2023-04-25 10:37:30 发布

原创最新推荐文章于 2023-04-25 10:37:30 发布 · 808 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue

前后端分离专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何将Vue项目与SpringBoot应用整合并部署至服务器的步骤，包括解决跨域问题，通过Maven打包，以及在服务器上正确配置前端静态资源路径。

vue-cli与springboot直接整合部署的坑

默认读者已解决前后端跨域问题，项目可以通过maven打成jar包

1.vue-cli打包

（1）打包部署服务器之前，记得把项目中axios请求访问路径，从本地改为服务器ip地址（本人就被坑在这里了），谷歌浏览器报 connection refused的错

（2）在命令行框，跳转到根目录路径输入：npm run build，对vue进行打包，生成的dist文件夹，即为打包好的前端静态资源

2.springboot打包

（1）将该dist文件夹复制到springboot项目，resource/static下，如果是直接复制dist文件夹，需要在dist文件下index.html中修改相关路径，加入如下内容，否则会出现访问的界面是白页：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>stuedents</title>
    <link href=/springboot下context-path路径/dist/static/css/app.c8492eb9b864a6aa0d11360db792aaf5.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=/springboot下context-path路径/dist/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/springboot下context-path路径/dist/static/js/vendor.091c2d2f88afc3718d86.js></script>
<script type=text/javascript src=/springboot下context-path路径/dist/static/js/app.51290469e7f22fa45fde.js></script>
</body>
</html>

（2）maven打成jar包，生成位置在target中
（3）服务器部署