服务器部署前后端分离项目并利用nginx绑定域名

说来惭愧，许久未更新文章了。想着买来的服务器和域名不能浪费，今天就利用这俩水篇文章吧，正好也记录下我的vue开篇之路。

前言

首先不得不说vue是个便捷的“家伙”，用起来写代码刷刷刷的，比原生js写起来方便太多了。而且自己一直也想利用vue做个项目，一方面练练手，另一方面也想实现下自己的脑点子、小想法。早几个月前脑袋中就有一个脑点子，费掉几个头发后，利用业余时间，正式启动项目，为这个项目起代号为we，名为同路人，目前还在开发中,不多介绍。说来很懊恼，进了新公司一直没时间，这个项目也只能利用下班时间，零零星星的写点。

就在这个星期，项目终于有点了起色。已经实现了登录、注册、找回密码基础功能🙃。后端用springboot专门提供接口服务。技术栈无非是spring security,jwt,redis,mybatis plus。不过这个持久层框架考量了好久，本来打算用JdbcTemplate的，直接sql就是干，没有过多的配置。但是看网上以及同事都在用mybatis，所以也就使用了它的升级版mybatis plus😂。项目的这些技术栈都是一步一代码搭起来的，之所以没有选择现有的脚手架，原因还是想搭建一款符合自己心中纯接口服务的项目。反正就是一句话，自己动手做的才是最香的，才会了解她的每一个地方（啥？为啥用女她？自己精心抚养长大的代码就是我的老baby就是我女朋友）。

不多说，扯远了。言归正传，进入今天的主题：部署项目、绑定域名。

vue打包

熟悉vue的都知道，他有两种模式：一种带#号的一种不带#号history模式的😂。我采用的是history模式。配置也很简单。但是打包后打开首页可能会是空白页，也可能会出现打开二级页面正常，再次刷新空白的情况，针对第一个问题，可以在./config/index.js中配置一下assetsPublicPath: './'即可，第二种问题需要配置nginx配置文件，这个地方vue官方文档也有说明。

nginx.conf

1
2
3

location / {
  try_files $uri $uri/ /index.html;
}

springboot打包

这个没啥好说的，直接执行mvn clean package。而且IDEA中打包及其方便，点点按钮就可以。mvn打包中会测试跑一遍程序，要想不测试直接打包可直接执行命令mvn clean package -DskipTests或者mvn clean package -Dmaven.test.skip=true即可。