宝塔面板部署vue项目(MyAuthWeb)

前言

在前文中，部署好后端了，就可以开始部署前端了，本文使用常见的宝塔面板演示
宝塔面板部署vue项目一般有两种方式，一种是build成纯静态部署，一种是直接部署node项目(待完善)
本文以TianYe负责维护的MyAuthWeb为例
前端项目地址：https://gitee.com/fieldtianye/my-auth-web
MyAuthWeb TianYe版预览：https://www.cnblogs.com/daen/p/16019664.html

纯静态部署教程

方式一：使用build好的my-auth-web-custom.zip

这个是使用feature/custom分支build好的，方便不懂nodejs和vue的朋友部署
发行包下载地址：https://gitee.com/fieldtianye/my-auth-web/releases

自行下载最新版本即可

下载压缩包后，修改里面的serverConfig.json文件，内容说明如下

{ 
  "publishRootUrl": "http://localhost:8080",//生产环境后端地址
  "localRootUrl": "http://localhost:8080",//本机测试的后端地址
  "apiTimeout": 10000,//接口超时时间
  "projectName": "MyAuth",//项目名称
  "internetContentProvider": "浙ICP备000001号-1(伪)",//底部备案号
  "copyright": "2022 Server By Daen | Web By Shine",//底部版权
  "slogan": "My团队出品的权限管理工具\r\n ::twemoji:smile:: 要永远相信",
  "boardRefreshTime": 30000
 }

把文件夹里的当成PHP项目，在宝塔里正常创建网站，上传即可

方式二：使用master分支自己build

前提

1. 配置好你电脑的vue基础环境，包括脚手架和nodejs
2. 安装好yarn

环境配置看以下文章

在VScode下搭建Vue环境

9个月前

020411

下载项目源码

在MyAuthWeb项目地址中，按照您喜欢的方式下载
例如使用ZIP方式下载、git clone到本地等

修改项目

使用VsCode或者IDEA或者您喜欢的工具打开项目，本文以VsCode为例
修改.env文件里的后端地址

编译项目

1. 新建终端

2. 在新建的终端运行以下命令

运行 yarn 还原包

yarn

运行 yarn run serve 启动项目（本地运行项目，可忽略）

yarn run serve

运行 yarn build 发行项目

yarn build

成功后，就可以在项目根目录里看到dist文件夹了，这个就是网站源码了
把文件夹里的当成PHP项目，在宝塔里正常创建网站，上传即可

node项目部署教程

暂无