Cloudbase Framework 是云開(kāi)發(fā)官方出品的前后端一體化部署工具，無(wú)需修改業(yè)務(wù)代碼，就能將 Vue 應(yīng)用前后端一鍵托管部署在云開(kāi)發(fā)平臺(tái)。借助于 Cloudbase Framework，你可以一鍵部署一個(gè)已有的 Vue 項(xiàng)目，也可以快速創(chuàng)建一個(gè)新的 Vue 項(xiàng)目，用于后續(xù)開(kāi)發(fā)。

第一步：確保本地安裝了 Node.js

node 版本需要在10以上，如果沒(méi)有安裝，請(qǐng)前往?官網(wǎng)?安裝，建議選擇 LTS 版本。

第二步：擁有騰訊云賬號(hào)，開(kāi)通環(huán)境并獲得了環(huán)境ID

第三步：安裝 Cloudbase CLI

npm i -g @cloudbase/cli檢查是否安裝成功。如果有版本輸出，就代表安裝成功了。cloudbase -vcloudbase 命令可以簡(jiǎn)寫(xiě)成 tcb(Tencent CloudBase 的簡(jiǎn)稱(chēng))。關(guān)于tcb -h，來(lái)看看 cloudbase 有哪些能力。總結(jié)下來(lái)，大概是這幾方面：

• 騰訊云賬號(hào)登錄、退出

• 云開(kāi)發(fā)環(huán)境配置

• 應(yīng)用配置初始化與部署

• 云函數(shù)相關(guān)

• 文件上傳、下載、刪除、權(quán)限設(shè)置

• HTTP Service相關(guān)

第四步：登錄 Cloudbase

輸入以下命令，會(huì)在瀏覽器打開(kāi)騰訊云的授權(quán)頁(yè)面，點(diǎn)擊“確認(rèn)授權(quán)”即可。cloudbase login準(zhǔn)備工作都做好以后，我們就可以著手部署相關(guān)的工作了。

總的來(lái)說(shuō)，用 Cloudbase Framework 部署一個(gè) Vue 應(yīng)用，只需要兩步。第一步：初始化項(xiàng)目配置；第二步，部署。如果你的項(xiàng)目已經(jīng)存在，在項(xiàng)目根目錄，執(zhí)行以下命令，生成項(xiàng)目配置。cloudbase init --without-template選擇關(guān)聯(lián)環(huán)境后，會(huì)在項(xiàng)目根目錄，生成一個(gè) cloudbasrc.json 文件。云開(kāi)發(fā)環(huán)境 ID 會(huì)被寫(xiě)進(jìn)這個(gè)文件。{"envId":"static-176d4a"}接下來(lái)，輸入以下命令，進(jìn)行部署。cloudbase framework:deploy這個(gè)命令會(huì)做以下幾件事：1)安裝插件??@cloudbase/framework-plugin-website。在cloudbaserc.json里，你會(huì)發(fā)現(xiàn)執(zhí)行這個(gè)命令后，新增了這個(gè)插件。2)讀取云開(kāi)發(fā)環(huán)境ID3)讀取publicPath，并將應(yīng)用資源托管到 /下。因?yàn)閙y-vue-app是用vue-cli創(chuàng)建的項(xiàng)目，所以publicPath默認(rèn)為"/"4)打包5)安裝 node_modules6)部署部署成功后，訪問(wèn)地址：https://static-176d4a.tcloudbaseapp.com/

第一步：初始化項(xiàng)目

執(zhí)行以下命令，Cloudbase 除了會(huì)幫你生成項(xiàng)目配置外，還會(huì)初始化項(xiàng)目。cloudbase init --template=vue執(zhí)行命令后，會(huì)讓你選擇關(guān)聯(lián)環(huán)境、選擇云開(kāi)發(fā)模板(Vue 應(yīng)用)、輸入項(xiàng)目名稱(chēng)。這里，我們的項(xiàng)目名是cloudbase-example。需要注意的是，cloudbase 默認(rèn)會(huì)創(chuàng)建一個(gè)全棧 Vue 應(yīng)用，如果你只想要一個(gè)靜態(tài) Vue 應(yīng)用，需要手動(dòng)去掉云函數(shù)部分的代碼。進(jìn)入創(chuàng)建好的項(xiàng)目根目錄，瀏覽文件結(jié)構(gòu)你會(huì)發(fā)現(xiàn)和 cloudbase 相關(guān)的，除了 cloudbaserc.json 以外，還有一個(gè) cloudfunctions 目錄。這個(gè)目錄就是云函數(shù)所在的目錄。在 cloudfunctions 目錄下有一個(gè)名為 vue-echo 的函數(shù)，這個(gè)云函數(shù)，稍后會(huì)用到。cloudebaserc.json里，會(huì)默認(rèn)安裝兩個(gè)插件。之前提到的@cloudbase/framework-plugin-website和 云函數(shù)部署相關(guān)的?@cloudbase/framework-plugin-function

第二步(可跳過(guò))：本地開(kāi)發(fā)。

執(zhí)行?npm i,?安裝?node_modules。執(zhí)行?npm run dev?。本地運(yùn)行時(shí)，默認(rèn)監(jiān)聽(tīng)端口是 5000，publicPath 是?/vue。這些配置項(xiàng)均可在 package.json 里修改。點(diǎn)擊“調(diào)用 hello world 云函數(shù)”按鈕時(shí)，會(huì)調(diào)用 callFunction 這個(gè)方法。而這個(gè)方法，會(huì)去調(diào)用名為“vue-echo” 的云函數(shù)。這個(gè)云函數(shù)做的就是“echo”的工作，返回一個(gè)對(duì)象，key名為“event”, value是你傳入的對(duì)象?{"foo":"bar"}點(diǎn)擊按鈕，你會(huì)發(fā)現(xiàn)返回結(jié)果已經(jīng)展現(xiàn)在頁(yè)面里了。關(guān)于 cloudbase 的云函數(shù)，之后的文章會(huì)進(jìn)一步說(shuō)明，這里就不贅述了。

第三步：部署

默認(rèn) cloudPath 是?/vue。如果要修改靜態(tài)資源路徑，請(qǐng)?jiān)?cloudbaserc.json 里修改 cloudPath。輸入以下命令，進(jìn)行部署。cloudbase framework:deploy部署成功展示：如果你在部署過(guò)程中，遇到了問(wèn)題，或者希望我們能支持新功能，歡迎 issues 反饋！作者：秦慕，前端開(kāi)發(fā)工程師，目前就職于騰訊醫(yī)典。熱愛(ài)開(kāi)源，業(yè)余開(kāi)發(fā)過(guò)文檔翻譯工具Breword(https://www.breword.com/)，翻譯過(guò)husky、create-react-app、redux、esbuild文檔。

---

歡迎在下方評(píng)論區(qū)留言或在微信開(kāi)放社區(qū)?進(jìn)入云開(kāi)發(fā)專(zhuān)區(qū)與我們交流。

Cloudbase Framework

??更多精彩點(diǎn)擊下方圖片即可了解△?Vue在云開(kāi)發(fā)中的使用丨視頻演練△?打通前后端，這款效能提升開(kāi)源“神器”你一定要了解！

---

---

由于公眾號(hào)推送規(guī)則更改，請(qǐng)多多分享、點(diǎn)贊和“在看”，以及時(shí)獲取云開(kāi)發(fā)Cloudbase的最新動(dòng)態(tài)。

? ? ? 點(diǎn)擊在看讓更多人發(fā)現(xiàn)精彩

總結(jié)

以上是生活随笔為你收集整理的项目如何用jetty运行_如何用Cloudbase Framework部署一个Vue项目？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。