宝塔面板nodejs+vue+mysql前后分离项目部署上线

准备

• 服务器
• 域名
• vue+nodejs项目
• mysql 5.6
• PM2管理器 5.2

安装宝塔面板，及安装推荐配置

部署项目

新建数据库

• 将后端项目的数据库相关信息改为线上，并用navicat将数据导入

前端

• ①宝塔面板->网站->添加站点

• ②上传前，如在vue.config.js配置了跨域代理，则将其注释

• ④然后将前端项目用npm run build 打包，再将dist目录上传到站点的文件目录里，解压。

• ⑤新建的站点，点击设置配置文件，配置nginx反向代理

    location /api {
      # 后端地址
      proxy_pass http://域名:后端接口/;
      proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;              
      proxy_set_header X-Forwarded-Proto $scheme;              
      proxy_set_header X-Forwarded-Port $server_port;   
      #如果在location /api 设置前缀，则后端地址没有固定前缀，则需用rewrite去除URL中的特定参数
      rewrite /api/(.*)$ /$1 break;
    }

• 注意：前端的baseURL也需要进行对应修改，与上面配置保持一致，实现跨域。

• ⑥配置伪静态

    location / {
      root 前端目录;
      index index.html;
      try_files $uri $uri/ /index.html;
    }

后端

• ①打包上传到相应后端文件夹，解压
• 注意：如果没有连node_modules一起打包，则去后端文件夹，终端npm install

• ②宝塔面板->软件商店->打开PM2管理器->设置->添加项目

• ③设置相应端口，重启

运行网站则上线部署完成