vue-cli+express+serverless服务器上线部署教程

前端部分 vue-cli创建工程脚手架


step1:新建文件夹
step2:在创建的文件夹中执行下面命令

npm install -g @vue/cli vue create .

vue-cli+express+serverless服务器上线部署教程
文章图片

◆ 输入后会让你选择,按提示即可
vue-cli+express+serverless服务器上线部署教程
文章图片

vue-cli+express+serverless服务器上线部署教程
文章图片

◆ 最后执行结束提示如下即成功
vue-cli+express+serverless服务器上线部署教程
文章图片

◆ 会生成以下目录
vue-cli+express+serverless服务器上线部署教程
文章图片



step3:运行vue-cli-service serve调试
◆ 执行下面命令
npm run serve

vue-cli+express+serverless服务器上线部署教程
文章图片

◆ 打开Local网址
vue-cli+express+serverless服务器上线部署教程
文章图片



step4:运行vue-cli-service build打包工程
◆ 执行下面命令
npm run build

vue-cli+express+serverless服务器上线部署教程
文章图片

◆ 执行结束后会生成dist目录
vue-cli+express+serverless服务器上线部署教程
文章图片

前端部分到此结束...




后端部分 Express框架之express脚手架


step1: 执行下面命令-安装生成器
npm install express-generator -g

step2: 创建名称为APP的应用:
express app

vue-cli+express+serverless服务器上线部署教程
文章图片

目录结构
vue-cli+express+serverless服务器上线部署教程
文章图片

step3: 将前端部分生成打包的dist文件夹的所有文件复制到public目录下
vue-cli+express+serverless服务器上线部署教程
文章图片

step4:本地调试-执行下面命令
npm run start

vue-cli+express+serverless服务器上线部署教程
文章图片

◆ 打开http://localhost:3000/
vue-cli+express+serverless服务器上线部署教程
文章图片

step5:创建自启动脚本,在根目录下创建scf_bootstrap文件
vue-cli+express+serverless服务器上线部署教程
文章图片

后台部分完成...




腾讯云serverless平台部署
step1:将后端部分的APP应用所有文件上传至任意一个git仓库
vue-cli+express+serverless服务器上线部署教程
文章图片

step2:登录腾讯云-打开serverless应用中心
vue-cli+express+serverless服务器上线部署教程
文章图片

vue-cli+express+serverless服务器上线部署教程
文章图片

step3:点击新建应用-选择Web应用-Express框架
vue-cli+express+serverless服务器上线部署教程
文章图片

step4:配置好应用名、上传方式选择代码仓库、配置好代码源、仓库信息,其他默认即可,点击完成触发自动部署
vue-cli+express+serverless服务器上线部署教程
文章图片

vue-cli+express+serverless服务器上线部署教程
文章图片

step5:自动部署完成后,打开域名
vue-cli+express+serverless服务器上线部署教程
文章图片

vue-cli+express+serverless服务器上线部署教程
文章图片

【vue-cli+express+serverless服务器上线部署教程】大功告成~

    推荐阅读