宝塔面板部署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到本地等
宝塔面板部署vue项目(MyAuthWeb)插图

修改项目

使用VsCode或者IDEA或者您喜欢的工具打开项目,本文以VsCode为例
修改.env文件里的后端地址
宝塔面板部署vue项目(MyAuthWeb)插图1

安装项目依赖

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

yarn 

本机运行(可跳过)

在终端执行

yarn run serve 

部署到宝塔

build成纯静态方式

在终端执行

yarn build 

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

node部署方式

待完善

原文链接:https://www.cnblogs.com/daen/p/16015813.html

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享