记录第一次部署两个vue项目+springboot项目至域名

ゝ一世哀愁。 2023-09-29 11:44 3阅读 0赞

#### 摘要 ####

最近这段时间跟着B站的视频做了个音乐播放网页，做完后发现视频后面没有涉及到如何部署的问题，于是自己研究如何进行部署。

两个vue前端，一个springboot后端.

#### 部署数据库 ####

将本机数据库的数据导出，在linux服务器中的mysql中进行写入即可。

#### SpringBoot后端服务器进行打包部署 ####

后端服务器打包部署的我就不详细说了哈，跟大家简单概括一下

1.  打开编写好的后端项目，修改配置文件中的数据库信息为linux服务器中的信息，修改配置的虚拟路径为linux中的地址，配置访问端口号
2.  点击clean,点击install,点击package
    
    ![image-20220424002001444][]
3.  此时项目会进行打包，打包成功后你的项目路径下的target包中会出现一个jar包
    
    ![image-20220424002100755][]
4.  然后通过xftp连接你的linux服务器，将jar包通过xftp上传至服务器中进行不间断运行即可（具体怎么启动jar包可以网上搜，怎么关闭了窗口jar包后台运行也可以网上搜）

#### vue项目打包 ####

由于我做的该项目有两个vue，所以两个项目都需要进行打包

##### client的vue项目进行打包 #####

运行`npm run build`打包命令之前需要进行几步操作:

1.  修改config目录的index.js文件中bulid的内容，将assetsPublicPath修改为`./`，否则会出现白屏的现象，修改axios访问路径为linux服务器的ip地址
    
    ![image-20220424001339672][]
2.  运行`npm run build`，运行完毕后项目目录下会出现dist文件(如果idea中因为缓存没有出现，就去本地项目文件路径下找)，dist文件中会出现static文件夹和index.html文件
3.  运行index.html，查看资源是否正常显示，测试能否正常访问已经部署完成的后端服务器
4.  如果资源显示正常，但不能访问部署完成的后端，则说明你的访问路径有问题，需要修改axios访问路径为linux服务器的ip地址
5.  如果资源还是显示不正常则需要在build目录下的utils中添加如下语句
    
    ![image-20220422191746138][]
6.  然后在进行打包访问测试即可

##### mange的vue项目进行打包 #####

具体操作与client的vue项目打包一样，但在打包这个vue项目的时候我出现了测试访问的标题是乱码的问题

解决的操作如下：

在产生乱码的html的head中添加以下代码即可：

![image-20220423001928081][]

最后再次进行打包

#### 两个vue前端项目的部署 ####

由于不会nginx和dockwe，所以我选择了使用宝塔的简单部署

不知道宝塔是什么的可以去找文章看一下，这个很简单的

1.  打开你的宝塔界面
    
    ![image-20220424003552833][]
2.  点击网站
    
    ![image-20220424003507946][]
3.  点击添加站点（域名需要进行解析，解析操作网上找，很简答）
    
    ![image-20220424003849386][]
4.  点击根目录
    
    ![image-20220424003953720][]
5.  删除掉原本根目录中的全部内容，将client打包的dist文件中的sttatic和index.html直接放进来
    
    ![image-20220424004122189][]
6.  这个时候直接访问你设置的网站名即可访问client
7.  添加mange的vue项目进去，新建一个manage文件夹，将manage的vue项目打包的dist文件中的static和index.html文件放进去即可
    
    ![image-20220424004229895][]
8.  通过`设置的网站名/manage`即可访问manage的前端

到这里项目就基本部署完成了，可以直接通过网络进行访问

[image-20220424002001444]: https://img-blog.csdnimg.cn/img_convert/7e4c499a590ebd78c6af6486a15dbaf8.png
[image-20220424002100755]: https://img-blog.csdnimg.cn/img_convert/d4eebc7bcab12820edb014f26741da67.png
[image-20220424001339672]: https://img-blog.csdnimg.cn/img_convert/c7784f06089156552735719ba85fb6f1.png
[image-20220422191746138]: https://img-blog.csdnimg.cn/img_convert/60f4237df3d93ab383a03c91620be253.png
[image-20220423001928081]: https://img-blog.csdnimg.cn/img_convert/c41805617eb84d67da07f884b8cc95e2.png
[image-20220424003552833]: https://img-blog.csdnimg.cn/img_convert/9e0adbc831bc0d87b9bb23d8c696ad12.png
[image-20220424003507946]: https://img-blog.csdnimg.cn/img_convert/fbd51b59ff7c44ad34635324bf21c23f.png
[image-20220424003849386]: https://img-blog.csdnimg.cn/img_convert/730b1790794d609d39e7dedf51870122.png
[image-20220424003953720]: https://img-blog.csdnimg.cn/img_convert/61a53e936d124db8bb3f8b05ba0121e7.png
[image-20220424004122189]: https://img-blog.csdnimg.cn/img_convert/0d4a53b514dd19012b61c804687777ab.png
[image-20220424004229895]: https://img-blog.csdnimg.cn/img_convert/41df580ef87d26051f5f23d356c4e1b5.png