Cloudbase Framework 是云開發官方出品的前后端一體化部署工具，無需修改業務代碼，就能將 Vue 應用前后端一鍵托管部署在云開發平臺。借助于 Cloudbase Framework，你可以一鍵部署一個已有的 Vue 項目，也可以快速創建一個新的 Vue 項目，用于后續開發。

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

node 版本需要在10以上，如果沒有安裝，請前往?官網?安裝，建議選擇 LTS 版本。

第二步：擁有騰訊云賬號，開通環境并獲得了環境ID

第三步：安裝 Cloudbase CLI

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

• 騰訊云賬號登錄、退出

• 云開發環境配置

• 應用配置初始化與部署

• 云函數相關

• 文件上傳、下載、刪除、權限設置

• HTTP Service相關

第四步：登錄 Cloudbase

輸入以下命令，會在瀏覽器打開騰訊云的授權頁面，點擊“確認授權”即可。cloudbase login準備工作都做好以后，我們就可以著手部署相關的工作了。

總的來說，用 Cloudbase Framework 部署一個 Vue 應用，只需要兩步。第一步：初始化項目配置；第二步，部署。如果你的項目已經存在，在項目根目錄，執行以下命令，生成項目配置。cloudbase init --without-template選擇關聯環境后，會在項目根目錄，生成一個 cloudbasrc.json 文件。云開發環境 ID 會被寫進這個文件。{"envId":"static-176d4a"}接下來，輸入以下命令，進行部署。cloudbase framework:deploy這個命令會做以下幾件事：1)安裝插件??@cloudbase/framework-plugin-website。在cloudbaserc.json里，你會發現執行這個命令后，新增了這個插件。2)讀取云開發環境ID3)讀取publicPath，并將應用資源托管到 /下。因為my-vue-app是用vue-cli創建的項目，所以publicPath默認為"/"4)打包5)安裝 node_modules6)部署部署成功后，訪問地址：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 反饋！作者：秦慕，前端開發工程師，目前就職于騰訊醫典。熱愛開源，業余開發過文檔翻譯工具Breword(https://www.breword.com/)，翻譯過husky、create-react-app、redux、esbuild文檔。

---

歡迎在下方評論區留言或在微信開放社區?進入云開發專區與我們交流。

Cloudbase Framework

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

---

---

由于公眾號推送規則更改，請多多分享、點贊和“在看”，以及時獲取云開發Cloudbase的最新動態。

? ? ? 點擊在看讓更多人發現精彩

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。