宝塔面板部署vue+node+mysql项目上线教程，最简单的操作！

前言

自学的前端，前些天做了一个电商后台管理系统项目，就想着把这个项目发布到互联网上，但是搜寻了一遍，网上的部署教程大都比较繁琐，摸索了一天，直到凌晨一点，终于搞定了，下面就给出最简单的小白部署vue+node+mysql项目上线教程以及遇到的各种坑，方便以后回来查阅

购买云服务器和安装宝塔面板

购买云服务器和安装宝塔面板的****：点我
看课时2、3、4即可。

注意，点击创建安全组时，若显示下图，用不习惯的话，只需点击右上角的回到旧版，就可以像****中用一样的创建安全组的方式了

完善项目运行环境

跟着视频的步骤，应该就已经安装好MySQL数据库了，此时还缺少nodejs的运行环境，点击软件商店，搜索PM2管理器进行安装。下图就是我项目运行所需安装的所有环境了（node+mysql）

点击PM2管理器的设置，可以进行模块的安装，在这里我安装了我项目运行所需的express和compression模块

添加项目数据库

点击左侧列表中的数据库，root密码改成root，点击添加数据库，数据库名字和用户名和你要导入的数据库的备份的名字一样，密码随意，在这里我要导入的是myb.sql，故数据库名和用户名为mydb

添加数据库后，点击导入，从本地上传，上传好之后，再点击一次对话框下面的导入。

上传项目文件

点击左侧列表中的文件，进入到/www/wwwroot，在这个目录里面上传后端（nodejs）项目文件夹，我的后端（nodejs）文件夹名是vue_api_server

注意！
上传的后端项目应是你在你的电脑运行npm install前的那个版本，这样能避免一些错误的发生。

进入上传好的后端文件夹中，点击终端，会弹出当前目录下的终端，在该终端运行 npm install 安装依赖包，安装完成后，关闭终端。

在这里还有个需要注意的地方，若后端项目中的启动文件（我的是app.js）是占用8888端口进行数据传输，而你的宝塔面板也是用的8888端口，就会发生端口冲突的错误。

此时你可以选择修改app.js里的端口，或者去面板设置修改宝塔面板的端口。

修改端口前，你需要到阿里云服务器那边的正在使用的安全组里，点击配置规则，添加相应的端口并开放。然后把你的新添加的端口范围填到app.js或者，填到面板设置中修改面板端口。

返回上一级的/www/wwwroot/目录，在该目录创建一个文件夹，我创建的文件夹名字为vue_shop_server。

进入新建的vue_shop_server文件夹中，点击上面的终端，
运行 npm init -y，npm i express -S（此命令是我项目所需，你的项目若用不到express框架，可忽略此命令）
完成后关闭终端。

打开你开发模式的前端项目，把你项目中的获取后端数据的接口基准地址中的ip改成你服务器的ip地址，地址后面的端口号应与你的后端（nodejs）项目的app.js中的端口保持一致

修改完成后，重新打包你的前端项目，把打包好的dist文件夹上传到vue_shop_server文件夹中。

服务器运行后端项目

点击右侧列表中的软件商店，点击已安装，打开PM2管理器，找到你后端项目根目录，填写启动文件名称，项目名称随意。

最后一步，发布网站，让全世界看到！

点击左侧列表中的网站，点击添加站点，若你没有域名，直接在域名栏填写云服务器的ip地址，ip后的端口就是访问你前端项目的端口，可随意设置，我设为9999。
根目录选择你的dist文件夹的路径，点击提交。

大功告成！此时在浏览器打开你刚刚添加的网址，就可以访问啦！