在阿里云服务器上部署vue3项目和express项目

1、首先在阿里云购买一台服务器，选择CentOS系统，购买完成后会有一个实例。然后远程连接 输入root账号和密码进入服务器

2、进入到服务器之后使用如下命令安装宝塔面板，宝塔是一个可视化的运维工具用它部署网站更加便捷

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 

3、在下载中间会出现一个确认提示，输入y即可，安装完成后会给有一个外网访问地址和需要阿里云服务器放行的端口以及登录宝塔面板的账号密码。（注意先把安装完之后给的账号密码记住，最好截图！！！）

4、下载好宝塔面板之后去到阿里云控制台https://ecs.console.aliyun.com，找到安全组，点击管理规则

4、选择入方向点击手动添加，端口范围填写安装完宝塔后提示要开放的端口号（也可以将后续要开放的端口在这一步骤先开放好，如数据库的3306端口，nginx的80端口，以及使用express写的服务端端口，一般默认3000，根据实际情况开放），授权对象选择所有IPv4（0.0.0.0/0），保存即可。

5、接着就可以在浏览器输入安装完宝塔面板给的地址和账号密码访问宝塔面板操控服务器，（注意第一次访问会出现不安全提示，不用理会，点击高级，继续访问）。第一次登录需要注册宝塔账号。

6、登录好之后，点击首页会出现推荐安装套件，我们选择**LNMP（推荐）**一键安装，等待这几个软件安装好

7、然后可以先进行创建数据库操作添加一个数据库

8、添加好数据库之后我们需要在按照上面的步骤在阿里云控制台开放MySQL数据库需要3306的端口，以及在宝塔面板的的安全那里点击添加端口规则，开放3306端口选择开放所有人，创建好数据库之后就可以使用我们的数据库管理工具如navicat，DBeaver等去管理我们的数据库

9、接着将vue3的前端代码运行npm run build 打包，生成一个dist目录，需要先试一下打开dist目录的index.html文件看一下页面是否空白，如果页面空白在vue.config.js文件里添加这段代码,添加完代码之后再运行 npm run build命令打包（注意需要将代码的127.0.0.1这个接口的公共地址改成服务器的ip地址！！！），如果页面还是出线空白可以尝试一下将router的history模式换成hash模式，不换的话需要在nginx配置一下，网上有相关的教程这里就不一一描述了

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: "./",
  transpileDependencies: true
})

10、同时将服务端的代码也压缩一下，（注意这里的连接数据库的代码里的数据库名和用户名密码需要改成在宝塔面板创建的数据库信息）

11、之后将打包好的dist文件压缩之后，打开宝塔面板在文件那里点击上传文件，上传压缩好的express的服务端代码和dist文件到/www/wwwroot目录下，如果没有的话可以自己创建目录。上传好之后把他们解压一下。

12、然后选择宝塔面板左侧导航栏的网站页面，选择node项目，刚开始会提示下载node版本管理器，先点击node版本管理器下载对应的node版本，可以参照本地的node版本

13、之后添加node项目，项目目录选择你express服务端代码所在的根目录，选择之后会自动帮你填写项目名称和启动选项，端口就填写3000或者自己之前使用端口，包管理器可以选择npm，这样就部署好express的服务端了（这里需要在阿里云控制台和宝塔面板开放3000端口）

14、接着开始部署前端代码，选择php项目，点击添加站点，输入域名也就是阿里云服务器的公网IP地址，根目录为存放dist文件的目录

至此你的vue3和express项目就部署好了，可以尝试一下在浏览器输入http：//你的服务器ip：80，看能不能访问到你的网站，这个80端口是nginx的，也需要在阿里云控制台和宝塔面板开放

如果线上网站出现网络什么的问题可以是你的代码之前是本地环境，用的IP地址都是localhost或者127.0.0.1的需要在你的代码里全局搜索一下替换成你的服务器IP地址

每个人的代码和环境都不一样所以遇到的情况也不一样，这里只是描述一下我部署项目到阿里云服务器的过程，我也是一个新手，所以难免会有一些描述不到位或者描述错误的，还请多多指教和交流，指出我的问题，同时也希望我的部署方法能帮助到你们。