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

摘要

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

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

部署数据库

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

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

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

1. 打开编写好的后端项目，修改配置文件中的数据库信息为linux服务器中的信息，修改配置的虚拟路径为linux中的地址，配置访问端口号

2. 点击clean,点击install,点击package

   

3. 此时项目会进行打包，打包成功后你的项目路径下的target包中会出现一个jar包

   

4. 然后通过xftp连接你的linux服务器，将jar包通过xftp上传至服务器中进行不间断运行即可（具体怎么启动jar包可以网上搜，怎么关闭了窗口jar包后台运行也可以网上搜）

vue项目打包

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

client的vue项目进行打包

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

1. 修改config目录的index.js文件中bulid的内容，将assetsPublicPath修改为./，否则会出现白屏的现象，修改axios访问路径为linux服务器的ip地址

   

2. 运行npm run build，运行完毕后项目目录下会出现dist文件(如果idea中因为缓存没有出现，就去本地项目文件路径下找)，dist文件中会出现static文件夹和index.html文件

3. 运行index.html，查看资源是否正常显示，测试能否正常访问已经部署完成的后端服务器

4. 如果资源显示正常，但不能访问部署完成的后端，则说明你的访问路径有问题，需要修改axios访问路径为linux服务器的ip地址

5. 如果资源还是显示不正常则需要在build目录下的utils中添加如下语句

   

6. 然后在进行打包访问测试即可

mange的vue项目进行打包

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

解决的操作如下：

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

<meta http-equiv=Content-Type content="text/html; charset=utf-8">

最后再次进行打包

两个vue前端项目的部署

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

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

1. 打开你的宝塔界面

   

2. 点击网站

   

3. 点击添加站点（域名需要进行解析，解析操作网上找，很简答）

   

4. 点击根目录

   

5. 删除掉原本根目录中的全部内容，将client打包的dist文件中的sttatic和index.html直接放进来

   

6. 这个时候直接访问你设置的网站名即可访问client

7. 添加mange的vue项目进去，新建一个manage文件夹，将manage的vue项目打包的dist文件中的static和index.html文件放进去即可

   

8. 通过设置的网站名/manage即可访问manage的前端

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