宝塔面板部署vue项目（MyAuthWeb）

前言

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

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

本文以TianYe负责维护的MyAuthWeb为例

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

MyAuthWeb TianYe版预览

https://www.cnblogs.com/daen/p/16019664.html

教程

方式一：使用feature/custom分支build，修改配置文件方式

同方式三，只不过后端地址什么的放到配置文件了，build后依然可以随意修改

里面的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"//底部版权
}

具体请看仓库readme

方式二：使用官方群群文件build好的my-auth-web-custom.zip

这个是使用feature/custom分支build好的，方便不懂nodejs和vue的朋友部署

下载压缩包后，修改里面的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"//底部版权
}

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

前提

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

2.安装好yarn

下载项目源码

在MyAuthWeb项目地址中，按照您喜欢的方式下载

例如使用ZIP方式下载、git clone到本地等

修改项目

使用VsCode或者IDEA或者您喜欢的工具打开项目，本文以VsCode为例

修改.env文件里的后端地址

安装项目依赖

新建一个终端，执行一下命令

yarn

本机运行（可跳过）

在终端执行

yarn run serve

部署到宝塔

build成纯静态方式

在终端执行

yarn build

成功后，就可以在项目根目录里看到dist文件夹了，这个就是网站源码了

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

node部署方式

待完善