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

宝塔面板部署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

2022-06-11T05:53:10.png

自行下载最新版本即可

下载压缩包后,修改里面的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

环境配置看以下文章

下载项目源码

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

2022-06-11T05:42:52.png

修改项目

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

2022-06-11T05:43:26.png

编译项目

  1. 新建终端

2022-06-11T06:17:15.png

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

2022-06-11T06:17:52.png
运行 yarn 还原包

yarn

运行 yarn run serve 启动项目(本地运行项目,可忽略)

yarn run serve

运行 yarn build 发行项目

yarn build

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

node项目部署教程

暂无

© 版权声明
THE END
喜欢就支持一下吧
点赞9赞赏 分享
评论 抢沙发

请登录后发表评论