阿里云服务器项目部署(vue+egg+....)

先购买阿里云服务器

服务器配置

阿里云服务器安全组开放端口,点击配置规则

实例点进来，然后点击安全组

开放相应端口(这里根据自己的条件来开放，如果不懂可以直接选择全部开放)

好了之后还有开放自己项目用到的端口号，你如你前端要用5173，后端用的7001，你就开放5173和7001端口,根据自己的条件来，授权对象的话就选0.0.0.0，然后点击保存就好啦。(描述的话，可写可不写，但是我建议写，防止以后还有上线其他项目的话搞混了)

远程连接服务器

登录连接到服务器后，咱们就可以运行借助宝塔来配置我们的服务器，进入宝塔官网，点击立即免费安转，滑到最底下，有以下的命令,我这边就给一个万能安装脚本的命令

万能安转脚本:if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec

复制粘贴到刚刚连上的服务器的界面，运行，运行中间一路yes就对了，完了之后是这个页面

复制第一个网址到浏览器打开，然后就会弹出一个登录页面，你再复制第二个框框里的username和password里的数登上去就可以了，

进去了之后，会弹出一个弹窗，选第一个

数据库配置

安装完了(这里是上面的5个安装完了之后哈)之后，先配置咱们得数据库

这里咱们配置的数据库尽量和项目用的一样，用户名不能用root你就换一个，后面改一下egg中config.default.js里面的关于数据库的配置，后面我会细说.

本地上传导入sql文件即可，导入之后记得要看一看数据是不是有，点击管理，去看看表和数据都在不在，这里我就不一一展示了

到这里，如果数据库没问题，咱们就进行下一步

egg项目配置

好了之后，你就要点进你的egg项目文件，在根目录创建一个server.js文件

const egg = require('egg');

const workers = Number(process.argv[2] || require('os').cpus().length);
egg.startCluster({
    workers,
    baseDir: __dirname,
});

把这个代码复制进去，保存

然后，找到config.default.js文件，双击一下

这里改好了之后，在想想哪里涉及到了域名的地方，都得改，比如头像上传啊等等，改完了之后咱们下载pm2

下好了之后，咱们用它

然后改这个后端的端口，你项目后端用的什么端口，你这就该成什么端口

然后后端就好了

宝塔面板放行端口

前端配置

1.在打包之前做两件事

如果你用的是ts写的且ts关于类型推论的报错没改完的话，是打包不了的，你要改下面的代码

在你的package.json：中
"scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",  这一行要改一下，改成"build": "vite build",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },

然后就是，如果你的vue项目的路由系统用的是HTML5 模式也就是用 createWebHistory() 创建 HTML5 模式，你就要多配置一个东西，这边建议你改成hash模式去index.ts改成hash模式就可以了

然后记得改域名，改完后在打包

dist你建传过来后，解压就ok了

 location /api/ {
            proxy_pass  http://自己的服务器公网ip:7001/;  7001是我的egg项目用的端口号，你们根据自己的情况写
            proxy_set_header Host $host:$server_port;
        }

如果没有改路由的历史模式为hash的话，就要在这儿载加上一个配置

location / {
  try_files $uri $uri/ /index.html;
}

到这儿就结束了！然后你就可以通过服务器公网ip访问你的项目啦！！

Vue3+Egg的前后端分离项目部署到阿里云服务器的超全攻略，家人们，冲冲冲！！