前言

在前文中，部署好后端了，就可以开始部署前端了，本文使用常见的宝塔面板演示

宝塔面板部署vue项目一般有两种方式，一种是build成纯静态，一种是直接部署node项目

前端项目地址：https://gitee.com/fieldtianye/my-auth-web

搭建教程

推荐使用打包好的my-auth-web-custom.zip进行搭建。

在MyAuth完整包中已经放入。

将其上传到myauth文件夹中即可。

宝塔面板部署vue项目（myauth前端）插图

修改里面的serverConfig.json文件，内容说明如下，修改【publishRootUrl】项值为后端地址

​{  
  "publishRootUrl": "http://localhost:8080",  //发行后后端请求接口
  "localRootUrl": "http://localhost:8080",   //开发阶段后端请求接口，发行版该参数无效
  "apiTimeout": 10000,  //接口超时时间，单位毫秒，若你部分接口数据量很大，请求时间超过10s，那改值可以适当调大
  "projectName": "MyAuth",  //项目名
  "internetContentProvider": "浙ICP备000001号-1(伪)",  //备案号
  "copyright": "2022 Server By Daen | Web By Shine",  //版权
  "slogan": "My团队出品的权限管理工具\r\n🙂要永远相信",   //login页面的标语
  "boardRefreshTime": 30000 //数据看板自动刷新时间，单位ms，设置为0或负值时表示不自动刷新刷新
}

全部设置完成后进行下一步

创建PHP项目

新建一个PHP项目，绑定域名，注意：域名无法设置与后端域名是同一个。

设置项目文件夹为项目所在文件夹。

自此，MyAuthWeb前端已经部署完成，可以访问绑定的域名进行测试了

管理员默认账号密码为
用户名：admin
密码：123456
admin账户为最高权限账户不可修改用户名

问题&解决

初次登陆如果出现以下情况，请检查serverConfig.json中的配置，将【publishRootUrl】修改为外网IP+端口

宝塔面板部署vue项目（myauth前端）插图1