项目如何用jetty运行_如何用Cloudbase Framework部署一个Vue项目?

5bcb4b44493795cfec3e4bca6eee490c.png

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

a927619d2a6f20518fd72fa8bacd72e7.png

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

node 版本需要在10以上,如果没有安装,请前往 官网 安装,建议选择 LTS 版本。

第二步:拥有腾讯云账号,开通环境并获得了环境ID

第三步:安装 Cloudbase CLI

npm i -g @cloudbase/cli
检查是否安装成功。如果有版本输出,就代表安装成功了。
cloudbase -v
cloudbase 命令可以简写成 tcb(Tencent CloudBase 的简称)。关于tcb -h,来看看 cloudbase 有哪些能力。e85e44da4f80f4d6c5df69c553f9086f.png总结下来,大概是这几方面:
  • 腾讯云账号登录、退出

  • 云开发环境配置

  • 应用配置初始化与部署

  • 云函数相关

  • 文件上传、下载、删除、权限设置

  • HTTP Service相关

第四步:登录 Cloudbase

输入以下命令,会在浏览器打开腾讯云的授权页面,点击“确认授权”即可。
cloudbase login
5e20fda6cc6b3a15d0d25a3a5a3f41a6.png准备工作都做好以后,我们就可以着手部署相关的工作了。

c84cb84cd8a173b28df574aefeeabe62.png

总的来说,用 Cloudbase Framework 部署一个 Vue 应用,只需要两步。第一步:初始化项目配置;第二步,部署。如果你的项目已经存在,在项目根目录,执行以下命令,生成项目配置。
cloudbase init --without-template
选择关联环境后,会在项目根目录,生成一个 cloudbasrc.json 文件。云开发环境 ID 会被写进这个文件。
{"envId":"static-176d4a"}
接下来,输入以下命令,进行部署。
cloudbase framework:deploy
fd4325fdf739df20871c73acd978d0c0.png这个命令会做以下几件事:1)安装插件  @cloudbase/framework-plugin-website。在cloudbaserc.json里,你会发现执行这个命令后,新增了这个插件。9c9abdd2ef2ced84a58dac1d77534237.png2)读取云开发环境ID3)读取publicPath,并将应用资源托管到 /下。因为my-vue-app是用vue-cli创建的项目,所以publicPath默认为"/"4)打包5)安装 node_modules6)部署部署成功后,访问地址:https://static-176d4a.tcloudbaseapp.com/5014d535f48b53ef4b087228a3a692ff.png

f893dee706269809754073415c3e392b.png

第一步:初始化项目

执行以下命令,Cloudbase 除了会帮你生成项目配置外,还会初始化项目。
cloudbase init --template=vue
执行命令后,会让你选择关联环境、选择云开发模板(Vue 应用)、输入项目名称。这里,我们的项目名是cloudbase-example。需要注意的是,cloudbase 默认会创建一个全栈 Vue 应用,如果你只想要一个静态 Vue 应用,需要手动去掉云函数部分的代码。进入创建好的项目根目录,浏览文件结构你会发现和 cloudbase 相关的,除了 cloudbaserc.json 以外,还有一个 cloudfunctions 目录。这个目录就是云函数所在的目录。在 cloudfunctions 目录下有一个名为 vue-echo 的函数,这个云函数,稍后会用到。49859974423c553374363b441da6d7b5.pngcloudebaserc.json里,会默认安装两个插件。之前提到的@cloudbase/framework-plugin-website和 云函数部署相关的 @cloudbase/framework-plugin-function22d057a3eb98be7534fab28e72973814.png

第二步(可跳过):本地开发。

执行 npm i, 安装 node_modules。执行 npm run dev 。本地运行时,默认监听端口是 5000,publicPath 是 /vue。这些配置项均可在 package.json 里修改。655e4744a5df78094b6f183443ad311f.png点击“调用 hello world 云函数”按钮时,会调用 callFunction 这个方法。21a35ed42e7cb8568f154f75968d3738.png而这个方法,会去调用名为“vue-echo” 的云函数。这个云函数做的就是“echo”的工作,返回一个对象,key名为“event”, value是你传入的对象 {"foo":"bar"}86e75cbb60c4299b19e71ed9099e82cf.png点击按钮,你会发现返回结果已经展现在页面里了。8c490883bcb7eb146a79089703e6b206.png关于 cloudbase 的云函数,之后的文章会进一步说明,这里就不赘述了。

第三步:部署

默认 cloudPath 是 /vue。如果要修改静态资源路径,请在 cloudbaserc.json 里修改 cloudPath。输入以下命令,进行部署。
cloudbase framework:deploy
部署成功展示:fd465c3721475269950bebb759806b57.png如果你在部署过程中,遇到了问题,或者希望我们能支持新功能,欢迎 issues 反馈!作者:秦慕,前端开发工程师,目前就职于腾讯医典。热爱开源,业余开发过文档翻译工具Breword(https://www.breword.com/),翻译过husky、create-react-app、redux、esbuild文档。

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

Cloudbase Framework

 更多精彩点击下方图片即可了解2ef1709b767ed38224d9b61ff36e945b.png△ Vue在云开发中的使用丨视频演练4016dcc63d45ae736e056242f9517d0c.png△ 打通前后端,这款效能提升开源“神器”你一定要了解!
037e6284990fc8085010330fb2d694f6.png
由于公众号推送规则更改,请多多分享点赞“在看”,以及时获取云开发Cloudbase的最新动态。

      点击在看让更多人发现精彩36a34f58b8d716a4fe3e0fd7f9b2ad0d.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/543618.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在桌面上创建路径

2019独角兽企业重金招聘Python工程师标准>>> //实例化filemanager NSFileManager*fm[NSFileManager defaultManager]; //获取桌面路径并创建新路径 NSArray*URLs[fm URLsForDirectory:NSDesktopDirectory inDomains:NSUserDomainMask]; if (URLs.count>0) { NSUR…

小米手环无法模拟门卡_颜值与功能得到全面升级,小米手环4 NFC版上手体验

提到国产智能手环,相信不少人第一时间想到的就是小米手环系列,就在前不久的时候,小米米家正式举办了新品发布会,而小米手环4系列也正式登场。与前代产品相比,小米手环4系列在很多方面都进行了全面升级,比如…

[小记]Centos7网络配置DNS配置解决、yum出错解决。

2019独角兽企业重金招聘Python工程师标准>>> Centos7: yum install iptables-services Error List: Loaded plugins: fastestmirror, Error: cannot find a valid baseurl for repo : base/7/x86_64 ... Solutions: a) fastest…

怎么覆盖默认样式_图形设计软件cdr教程:设置默认字体

互联网时代,设计师们现在都是用电脑进行设计,那么对字体的需求就比较多,CorelDRAW作为强大的平面设计软件,怎么在其中设置某字体为默认字体呢?对很多新手朋友来说,可能不是很理解。本文小编介绍在CDR中设置…

的garch预测_随机森林预测

当涉及到预测数据(时间序列或其他类型的序列)时,人们会关注基本回归、ARIMA、ARMA、GARCH,甚至Prophet,但不排除使用随机森林来预测数据。随机森林通常被认为是一种分类技术,但回归问题绝对是随机森林可以处理的。在本文中&#x…

统计abacbacdadbc中的每个字母出现的次数,输出格式是:a(4)b(3)c(3)d(2)

2019独角兽企业重金招聘Python工程师标准>>> import java.util.Iterator; import java.util.Map; import java.util.Set; import java.util.TreeMap; /** 统计abacbacdadbc中的每个字母出现的次数,输出格式是:a(4)b(3)c(3)d(2)* * 选中TreeMa…

[译]机器人操作系统简介:终极机器人应用框架(上)

2019独角兽企业重金招聘Python工程师标准>>> [译]机器人操作系统简介&#xff1a;终极机器人应用框架 /*** 原文出处&#xff1a;https://www.toptal.com/robotics/introduction-to-robot-operating-system* author dogstar.huang <chanzonghuanggmail.com> 2…

AIKit v4.11.0 – WordPress AI 自动编写器、聊天机器人、写作助手和内容重定向器 / OpenAI GPT 插件

AIKit v4.11.0&#xff1a;WordPress的AI革命 一、引言 AIKit v4.11.0是一款为WordPress用户精心设计的强大插件&#xff0c;该插件集成了OpenAI的GPT-3技术&#xff0c;为用户提供了前所未有的AI写作和聊天机器人功能。此版本的推出&#xff0c;将WordPress的功能扩展到了全新…

精华阅读第6期|程序猿的世界,你不懂!

上周&#xff0c;微信圈被一篇文章刷屏了&#xff01;那就是西乔出品的《你为什么总招不到程序员&#xff1f;》&#xff0c;西乔的漫画之所以这么火&#xff0c;很重要的原因就是她懂程序猿的生活&#xff0c;同时作品也能够引起大家的共鸣。其实&#xff0c;移动开发精英俱乐…

恒生估值系统_恒生指数和恒生国企指数投资价值分析

恒生指数和恒生国企指数都是港股的大蓝筹指数。恒生指数是从香港股票市场挑选出50只优质蓝筹股票组成的指数。恒生国企指数又称为H股指数。H股指注册地在内地&#xff0c;但是上市地在香港的外资股票。恒生国企指数的成分股数目是没有限制的&#xff0c;但是必须为市值最大&…

java程序练习

数组求和作业 开发环境&#xff1a;java 工具&#xff1a;eclipse 两种数据类型excel和csv 在同学建议下&#xff0c;我选择用csv文件打开&#xff0c;这就引来了第一个问题&#xff0c;在java中如何调用csv文件。以下是我百度的结果 http://www.educity.cn/java/627496.html &…

hwd是长宽高吗_五菱皮卡要来了,五种形态任你选,颜值是你期待的吗?

近日&#xff0c;网友上传了五菱皮卡的渲染图&#xff0c;引起了大家对五菱皮卡的热烈讨论。在刚过去的2020年&#xff0c;五菱凭借性价比超高的宏光MINI EV成为了新能源领域的领头羊&#xff0c;而后推出的‘大四座’家用车五菱凯捷也取得了五万台的预定量&#xff0c;五菱一时…

原创 通过PEB获得进程路径 (附完整工程)

完整工程&#xff1a;http://files.cnblogs.com/files/Gotogoo/%E8%BF%9B%E7%A8%8B%E7%AE%A1%E7%90%86%E5%99%A8%28x86%26%26x64%29.zip PEB&#xff08;Process Environment Block&#xff0c;进程环境块&#xff09;存放进程信息&#xff0c;每个进程都有自己的PEB信息。位于…

Windbg SOS and CLR版本不一致的解决方案

由于测试服务环境与Windbg运行环境的差异&#xff0c;这就可能出现Windbg在分析dump文件时.net sos.dll和mscordacwks.dll版本不一致问题&#xff0c;从而导致windbg调试器的扩展命令无法正常使用&#xff0c;具体的解决方法如下&#xff1a;1.首先定义Windgb symbols路径&…

[DIV/CSS] 【译】60个有用CSS代码片段

2019独角兽企业重金招聘Python工程师标准>>> 1、垂直对齐 如果你用CSS&#xff0c;则你会有困惑&#xff1a;我该怎么垂直对齐容器中的元素&#xff1f;现在&#xff0c;利用CSS3的Transform&#xff0c;可以很优雅的解决这个困惑&#xff1a; .verticalcenter{posi…

java 类数组_Java常用类-字符串、日期类、算法及数组工具类等

大家好&#xff0c;乐字节的小乐又和大家见面了。这次要给大家讲述的是Java常用类。主要有以下知识点&#xff1a; 字符串相关类&#xff08;String 、StringBuffer、StringBuilder&#xff09; 算法及数组工具类(Arrays) 日期类 基本数据类型包装类 Math类 File类 枚举类一、 …

IOS之Foundation之探究学习Swift实用基础整理一

2019独角兽企业重金招聘Python工程师标准>>> 1 import Foundation2 3 //加载网络数据&#xff0c;查找数据的字符串4 let dataurl "http://api.k780.com:88/?appweather.city&&appkey10003&signb59bc3ef6191eb9f747dd4e83c99f2a4&formatjson…

sql 时间 没有日期_SQL-补充:日期和时间戳互转

补充&#xff1a;日期和时间戳互转1. 日期转时间戳-- 转十位select UNIX_TIMESTAMP(2018-12-25 12:25:00);结果&#xff1a;1545711900-- 转十三位SELECT REPLACE(unix_timestamp(current_timestamp(3)),.,);结果&#xff1a;15457119000212. 时间戳转日期 FROM_UNIXTIME(unix_…

vue那个生命周期函数操作dom_vue生命周期实例小结

本文实例分析了vue生命周期。分享给大家供大家参考&#xff0c;具体如下&#xff1a;每个Vue实例都存在完整的生命周期&#xff0c;经历从创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程。如下图所示vue的完整生命周期可分为三个阶段&#xff1a;初…

不求很多,够用就好

Hi&#xff0c;我是一名在校学生&#xff0c;目前大三&#xff0c;希望在前端方向上发展&#xff0c;最好以后是一个真全栈 曾经也会搜索一堆的工具&#xff0c;后面发现 只有正确的使用合理数量的工具&#xff0c;才能加快开发步伐 下面简单推荐几个实用工具&#xff0c;强大并…