VUE3.0 + nodejs + mysql 开发以及部署到服务器 （windows server）

一、本地配置

1.首先是VUE3.0、nodejs、mysql、VScode的安装与配置，详情参考：

　　VUE3.0和nodejs：https://blog.csdn.net/dream_summer/article/details/108867317

　　mysql：https://blog.csdn.net/SoloVersion/article/details/123760428

　　mysql图形化操作界面使用的mysqlworkbench：http://c.biancheng.net/view/2625.html

　　mysql录入中文字符乱码问题解决：https://blog.csdn.net/qq_40846862/article/details/121680266

　　VScode（官网下载最新就行）：https://code.visualstudio.com/Download

2.开发过程：

　　快速入手VUE3.0：https://www.bilibili.com/video/BV1VF411w7pv/?p=3&vd_source=83921521ab51ca865dece210a179668a

　　本地server服务配置（用于本地连接mysql调试，后续要更改一些参数上传到服务器中）：

　　　　https://blog.csdn.net/weixin_52580677/article/details/123204092（简单直接）

　　　　https://www.bilibili.com/video/BV1KX4y1K7uz/?spm_id_from=333.337.search-card.all.click（较为全面）

　　如果项目要大量调用图片资源，建议现将所用图片上传云存储，例如：腾讯云 。之后将图片的网络url存入相对应的数据库中，实现在线请求图片资源。

二、服务器配置（前后端全部部署到服务器上）

1.服务器准备：

　　1.1 租用阿里云服务器 ECS。服务器操作系统选择windows server，便于操作。操作过程：https://www.cnblogs.com/liangzhe/p/17149832.html

　　1.2 使用Xshell连接服务器，为文件上传坐准备。

　　　　1.2.1 本地下载Xshell与Xftp（个人使用是免费的）

　　　　1.2.2 操作流程

　　　　 注意！：OpenSSH是在服务器中下载，其服务也是在服务器中开启。而Xshell与Xftp则是在本地电脑下载。

　　1.3 安装Nginx代理，为前端部署做准备。

　　1.4 安装mysql服务端（与本地的不太一样，服务器中我选的mysql版本是最新 8. 的）、node.js、VScode，为后端部署坐准备。（安装VScode是为了更好的可视化项目结构）

　　　  这里要在阿里云安全组配置端口 3306与33060。

2.前端部署：

　　2.1 将VUE项目进行打包 ：

　　　　在打包之前需要将项目中所有本地请求数据的url，改为请求服务器数据的url。如果路径是BASE_PATH全局配置，对配置文件中的一个全局参数修改即可。如果没有用全局参数，那就一个个修改吧。例如（已经更改后的）：

　　　　

　　　　VScode中，新建终端 --> 在终端中输入 npm run build  （我在进行项目打包时，发现有许多图片文件没有打包上，上网查也没查到到底是为什么，所以建议还是把所有图片上传至云存储）。

　　　　打包完之后，项目文件夹中会出现 dist 文件夹，该文件夹内便是打包好的项目文件。

　　2.2 使用Xshell与Xftp将 dist文件夹 上传至服务器中nginx文件夹中的html文件夹中

　　　　

 　　2.3 配置 nginx

　　　　打开nginx的nginx.conf配置文件

　　　　

　　　　做以下更改，该端号同样需要在阿里云安全组配置中，进行配置

　　　　

  　　之后点击启动Nginx

 　　

  　　如任务管理器出现相关进程，代表启动成功

　　

   　　到现在为止，前端的部署就完成了，可以在本地访问服务端的网页。

 3.后端部署：

　　3.1 将本地Mysql数据传入服务器Mysql中：https://blog.csdn.net/LENOVOJXN/article/details/105507148

　　3.2 更改本地server配置

　　　　将本地数据库配置为服务器数据库配置。

 　　       

  　　3.3 使用Xshell与Xftp将server上传到服务器（可以放到别的地方，这里是图方便，直接跟dist文件夹放到一起了）

 　　　　

  　　3.4 使用nodejs开启server服务

　　　　3.4.1 使用VScode打开server文件夹

　　　　

 　　　　3.4.2 在阿里云安全规则组中 配置server监听端口号（很重要！在这里卡了四天）：

　　　　

 　　　　3.4.3 终端 --> 新建终端 --> 输入node app.js 并执行

　　　　　

  　　　   到现在为止，后端的部署就完成了，前端便可以访问后端的数据。

　　　　可以通过 http:公网IP/你定义的路由  来测试是否能够获取数据库数据。例如：