宝塔部署Vue3多页面+Springboot前后端分离项目

1、vue3项目打包

使用npm run build打包成文件夹。默认打包的文件夹名师dist。

题外话：package.json中的scripts可以按需求更改，npm run build其实就是运行的“vue-clil-service build”，所以有些npm run dev或者npm run start只需要看他后面的内容是什么就可以知道实际命令。

vue3项目时创建没有这个文件，需要自己创建，在这里可以修改打包的参数和配置多页面入口等，具体内容请百度。

2、springboot项目打包

使用maven快捷打包方式mvn clean package打包成jar包。当然还有其他打包方式，请另行百度。

3、上传前端和后端项目到宝塔

我是放在这个文件夹中，其实可以随便放在wwwroot目录下就行。

4、运行后端springboot项目

nohup java -jar xxxx.jar &   #运行项目

ps -aux|grep java #查看是否成功运行

5、运行前端项目

使用宝塔的创建站点功能

试着访问，若成功访问即创建站点成功。

题外话：前后端分离的话，前端vue使用axios访问后端需要使用后端的ip等不能使用localhost了。

6、nginx配置解决刷新访问404问题

使用history方式创建router时，部署到服务器上会出现刷新页面404的问题。

在nginx配置中使用try_files $uri $uri/ /index.html配置就可访问到，也可以用这个方式解决vue多页面入口项目找不到其他页面的问题，具体如下：