宝塔linux面板使用介绍vue3+vite+js+PM2项目打包上线（一文看懂）

---

以下文章前提，你已经在阿里云或者别的已经买了服务器并且配置好后

一、流程汇总

1.必装软件

其中必须要有的Nginx,MySql,Node.js版本管理器,宝塔SSH终端(默认下载),PM2管理器(我这里后端服务是用PM2)

进入宝塔linux时会给你推荐一个方案下载，选择下载推荐的软件更加方便

2.创建网站

点击左侧网站点击添加站点，根据输入框中的提示完成创建，域名处建议使用图片所示左上角的域名（双击复制）端口可以先用默认端口（不填写）

3.引入我们vue3项目打包好后的文件

我们创建好后大概长这个样子，这时我们可以点击图片所示位置进行项目的引入

进入目录后我们按图片点击引入打包好后的dist文件，打包流程往下看

4.vue项目打包

不用删nodemodules依赖在项目的根目录就是包括src，vite.config.js,等等的根目录

点击后进入根目录，在目录右键或者在地址栏输入cmd进入终端，在终端中输入

npm/pnpm build

打包完成大概长这样，一定要保证在打包之前vue项目正常运行，否则会出现报错，可以根据报错来排查错误，打包后是在项目根目录的dist文件夹

5.引入后将根目录改为刚才引入的dist文件

返回网站页点击设置

将目录指向你刚才引用进来的dist文件（要有html文件的前一个目录）
之后我们可以访问我们之前设置的ip+端口号来查看是否引入成功

二、配置数据库

1.进入数据库页添加数据库

密码建议进行修改要在后端进行数据库的配置大概在utils文件夹里的文件，我这里加common.js，否则会报错

const USER_NAME = '用户名'
const PASS_WORD = '密码'
const DATABASE_NAME = '数据库名'

之后我们点击导入按钮导入我们的.sql文件

导入后大概长这样，之后我们再点击这个页面的导入，我们的数据库就导入成功了，我们可以点击管理来进行查看

至此数据库配置成功

三、将后端服务引入在文件夹里

1.引入方法与导入dist文件雷同一定要自己能够找到这个后端文件

这里后端文件可以先把nodemodules删掉，后面在终端中使用npm i 下载nodemodules （会很坑！）

四、在左侧终端页面中启动后台服务

我们可以先输入cd /进入最开始的目录
之后输入cd xxx/xxx/xxx 最终指向你的后端文件，里面有app.js的上一级目录
之后我们要在之前下好依赖，我这里后台用的是PM2，所以我就输入pm2 start app.js来启动项目

在项目启动成功后我们可以输入pm2 logs来监听我们的项目
至此后端服务启动完毕，之后我们就可以通过ip+端口号正常访问我们写的vue项目了

总结

在这其中会遇到很多小错误，希望大家多尝试尝试，比较坑的就是linux的版本，node.js的版本（可以在node.js版本管理器 我们之前下好的软件中进行版本更改建议20版本以上，低版本会出现报错，我用的是20.17）**还有很重要的事！还有很重要的事！还有很重要的事！**如果前端页面报错css/js文件404，那我们大可以去我们引入的项目中的index.html中对css和js的路径进行修改

就把这个当成我们平时使用的html就可以，我们发现404后可以按f12打开网络点击刷新，我们就会发现是因为引用的路径出错我们需要进行修改css，js引用路径页面就会恢复正常

！！！还有一件事如果发现网页变得不太正常就可以研究研究
Nginx的配置，可以问gpt该如何修改，至此我们上线的网站就创建好啦
我们可以对我们的网站为所欲为
我是一个新手小白，可以来我的网站看一下哦http://39.107.91.102/，就上线了一个pc端的，轻点喷，喜欢的点个关注再走吧