Vue+springboot项目打包部署上线 | vite环境打包 | 遇到的问题及解决办法

在有了自己的服务器之后，我们需要把自己的项目打包部署到服务器上以便更多人访问。下面我将介绍如何使用宝塔面板工具打包部署我们的项目。

一.Vite环境打包前端项目

1.1 使用npm脚本对开发环境项目打包

 

图一 启动npm脚本打包

如果找不到npm脚本，可以进入package.json文件，刷新一下目录，查看自己npm脚本是否勾选。

                                        

图二 打包完成 

 1.2  打包完成  找到打包后的dist目录, 用Live Server 插件打开dist->index.html入口文件

                                                     图三 Live Server打开打包好的项目文件  

如果自己的VScode中找不到Live Server插件，可以在VScode中下载插件。

图三 打包好的前端页面

打开后如果自己的前端页面跟开发环境看到的一样，证明打包成功。(我的后端代码已经在云服务器上跑起来了，这里的数据可以正常获取到)。

        如果打开后页面空白，可能是vite打包和路由引起的，需要检查这些地方：

1.vite打包后index.html引用路径默认是'/'可能导致url拼接后地址发生变化，找不到需要的文件。所以需要在vite.config.ts文件中设置base: './'

                                                         图四 修改vite配置

2.修改router.ts中路由模式

图五 修改路由模式

修改配置后重新打包问题得到解决。

二. 后端项目打包 

我们使用Maven对后端项目进行打包，现在服务器上还没有安装数据库，项目配置文件先不修改。

图六 项目打包

三.宝塔远程连接云服务器

1.下载宝塔SSH终端

2.找到自己的公网ip复制下来

3.安全组中开放22，8000，80，3306以及其他需要用到的端口。

4.用安装好的宝塔远程工具连接服务器，忘记密码可以在实例中重置

5.连接成功后找到适合自己服务器的安装，我的是Centos

6.安装后在宝塔SSH终端中输入bt default, 用输出的外网网址，用户名和密码登录宝塔面板。

7.下载系统运行需要的编译环境，数据库和中间件。下面是我用到的软件

四. 连接远程数据库

1.软件下载完成后启动数据库

2.创建自己的数据库

3.Navicat远程连接数据库

        新建连接->mysql->常规

        连接名是刚创建的数据库名称，ip是服务器公网ip, 用户名和密码都是创建数据库时填写的。

4.使用数据传输工具把本地数据库的表传到远程数据库

五.准备部署上线项目

1.修改后端项目配置文件，改成自己服务器上的数据库配置，一定要改

2.找到/www/wwwroot目录，将前端打包好的dist目录上传到该目录下，新建一个文件夹用于存放后端文件。

3.部署前端

4.根据提示填写表单完成站点创建

5.创建好站点点击图示位置用Nginx代理，root为index.html文件所在目录，proxy_pass为后端接口地址

6.把后端项目配置文件和jar包上传到服务器后端目录下

7.在终端切换到该目录, 输入指令java -jar jar包名 $ 启动后端项目，一段时间终端没有打印证明启动成功，出现异常可以在nohup.out文件中查看，在本地解决后重新打包部署。

好啦，项目打包部署上线就分享到这里啦。希望对大家有所帮助