如何用Cloudbase Framework部署一个Vue项目？

Cloudbase Framework 是云开发官方出品的先后端一体化部署工具，无需修改业务代码，就能将 Vue 应用先后端一键托管部署在云开发平台。借助于 Cloudbase Framework，你能够一键部署一个已有的 Vue 项目，也能够快速建立一个新的 Vue 项目，用于后续开发。css

第一步：确保本地安装了 Node.js

node 版本须要在10以上，若是没有安装，请前往官网安装，建议选择 LTS 版本。

第二步：拥有腾讯云帐号，开通环境并得到了环境ID

第三步：安装 Cloudbase CLI

npm i -g @cloudbase/cli

检查是否安装成功。若是有版本输出，就表明安装成功了。

cloudbase -v

cloudbase 命令能够简写成 tcb（Tencent CloudBase 的简称）。

关于tcb -h，来看看 cloudbase 有哪些能力。

总结下来，大概是这几方面：

腾讯云帐号登陆、退出前端
云开发环境配置vue
应用配置初始化与部署node
云函数相关react
文件上传、下载、删除、权限设置nginx
HTTP Service相关web

第四步：登陆 Cloudbase

输入如下命令，会在浏览器打开腾讯云的受权页面，点击“确认受权”便可。

cloudbase login

准备工做都作好之后，咱们就能够着手部署相关的工做了。

总的来讲，用 Cloudbase Framework 部署一个 Vue 应用，只须要两步。第一步：初始化项目配置；第二步，部署。

若是你的项目已经存在，在项目根目录，执行如下命令，生成项目配置。

cloudbase init --without-template

选择关联环境后，会在项目根目录，生成一个 cloudbasrc.json 文件。云开发环境 ID 会被写进这个文件。

{"envId":"static-176d4a"}

接下来，输入如下命令，进行部署。

cloudbase framework:deploy

这个命令会作如下几件事：

1）安装插件 @cloudbase/framework-plugin-web site。 在cloudbaserc.json里，你会发现执行这个命令后，新增了这个插件。

2）读取云开发环境ID

3）读取publicPath，并将应用资源托管到 /下。 由于my-vue-app是用vue-cli建立的项目，因此publicPath默认为"/"

4）打包

5）安装 node_modules

6）部署

部署成功后，访问地址： https://static-176d4a.tcloudbaseapp.com/

第一步：初始化项目

执行如下命令，Cloudbase 除了会帮你生成项目配置外，还会初始化项目。

cloudbase init --template=vue

执行命令后，会让你选择关联环境、选择云开发模板（Vue 应用）、输入项目名称。这里，咱们的项目名是cloudbase-example。

须要注意的是，cloudbase 默认会建立一个全栈 Vue 应用，若是你只想要一个静态 Vue 应用，须要手动去掉云函数部分的代码。

进入建立好的项目根目录，浏览文件结构你会发现和 cloudbase 相关的，除了 cloudbaserc.json 之外，还有一个 cloudfunctions 目录。这个目录就是云函数所在的目录。在 cloudfunctions 目录下有一个名为 vue-echo 的函数，这个云函数，稍后会用到。

cloudebaserc.json 里，会默认安装两个插件。以前提到的 @cloudbase/framework-plugin-website 和云函数部署相关的 @cloudbase/framework-plugin-function

第二步（可跳过）：本地开发。

执行 npm i, 安装 node_modules。

执行 npm run dev 。本地运行时，默认监听端口是 5000，publicPath 是 /vue。这些配置项都可在 package.json 里修改。

点击“调用 hello world 云函数”按钮时，会调用 callFunction 这个方法。

而这个方法，会去调用名为“vue-echo” 的云函数。这个云函数作的就是“echo”的工做，返回一个对象，key名为“event”, value是你传入的对象 {"foo":"bar"}

点击按钮，你会发现返回结果已经展示在页面里了。

关于 cloudbase 的云函数，以后的文章会进一步说明，这里就不赘述了。

第三步：部署

默认 cloudPath 是 /vue。若是要修改静态资源路径，请在 cloudbaserc.json 里修改 cloudPath。

输入如下命令，进行部署。

cloudbase framework:deploy

部署成功展现：

若是你在部署过程当中，遇到了问题，或者但愿咱们能支持新功能，欢迎 issues 反馈！

做者：秦慕，前端开发工程师，目前就任于腾讯医典。热爱开源，业余开发过文档翻译工具Brewor d（https://www.breword.com/），翻译过husky、create-react-app、redux、esbuild文档。

欢迎在下方评论区留言或在微信开放社区进入云开发专区与咱们交流。vue-cli

Cloudbase Framework目前已经开源，点击文末阅读原文查看源码。npm

☁

更多精彩

点击下方图片便可了解

△ Vue在云开发中的使用丨视频演练

△ 打通先后端，这款效能提高开源“神器”你必定要了解！

因为公众号推送规则更改，请多多分享、点赞和 “在看” ，以及时获取云开发Cloudbase的最新动态。

点击在看让更多人发现精彩json

本文分享自微信公众号 - 腾讯云云开发（tcb2tcb）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。