無需修改業務代碼，就能將 Vue 應用前后端一鍵托管部署在雲開發平台~
Cloudbase Framework 是雲開發官方出品的前后端一體化部署工具。目前已經 [開源] 。
關於 Cloudbase Framework 的介紹，《雲開發推出「前后端一體化部署工具」CloudBase Framework》。想必大家看完，一定都磨刀霍霍。今天就給大家帶來一篇實戰文章，如何用 Cloudbase Framework 部署一個 Vue 項目。
准備工作
第一步：確保本地安裝了 Node.js
node 版本需要在 10 以上，如果沒有安裝，請前往官網安裝，建議選擇 LTS 版本。
第二步：擁有騰訊雲賬號、開通環境，獲得環境 ID
第三步：安裝 Cloudbase CLI
npm i -g @cloudbase/cli
檢查是否安裝成功。如果有版本輸出，就代表安裝成功了。
cloudbase -v
cloudbase 命令可以簡寫成 tcb（Tencent CloudBase 的簡稱）。
tcb -h 看看 cloudbase 有哪些能力。
總結下來，大概是這幾方面：
騰訊雲賬號登錄、退出
雲開發環境配置
應用配置初始化與部署
雲函數相關
文件上傳、下載、刪除、權限設置
HTTP Service 相關
第四步：登錄 Cloudbase
輸入以下命令，會在瀏覽器打開騰訊雲的授權頁面，點擊“確認授權”即可。
cloudbase login
准備工作都做好以后，我們就可以着手部署相關的工作了。
部署 Vue 應用
總的來說，用 Cloudbase Framework 部署一個 Vue 應用，只需要兩步。第一步：初始化項目配置；第二步，部署。
現有項目
如果你的項目已經存在，在項目根目錄，執行以下命令，生成項目配置。
cloudbase
選擇關聯環境后，會在項目根目錄，生成一個 cloudbasrc.json 文件。雲開發環境 ID 會被寫進這個文件。
{ "envId": "static-176d4a" }
接下來，輸入以下命令，進行部署。
cloudbase framework deploy
這個命令會做以下幾件事：
安裝插件：@cloudbase/framework-plugin-website。在 cloudbaserc.json 里，你會發現執行這個命令后，新增了這個插件。
讀取雲開發環境 ID
讀取 publicPath，並將應用資源托管到/下。因為 my-vue-app 是用 vue-cli 創建的項目，所以 publicPath 默認為"/"
打包
安裝 node_modules
部署
部署成功后，訪問地址：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 里修改。
部署雲函數： tcb functions:deploy vue-echo
點擊“調用 hello world 雲函數”按鈕時，會調用 callFunction 這個方法。
而這個方法，會去調用名為“vue-echo” 的雲函數。這個雲函數做的就是“echo”的工作，返回一個對象，key 名為“event”, value 是你傳入的對象 { "foo": "bar" }
點擊按鈕，試試。你會發現返回結果已經展現在頁面里了：
關於 cloudbase 的雲函數，之后的文章會進一步說明，這里就不贅述了。
第三步：部署
默認 cloudPath 是 /vue。如果要修改靜態資源路徑，請在 cloudbaserc.json 里修改 cloudPath。
輸入以下命令，進行部署。
cloudbase framework deploy
部署成功
待優化的地方
在體驗過程中，用戶反饋了這些問題，我們之后會逐步優化。
初始化新項目時，支持自動安裝 node_modules
目前執行cloudbase init --template=vue 時，是不會執行npm install的腳本來安裝 node_modules 的。
初始化項目，支持僅初始化靜態 Vue 應用。
目前執行cloudbase init --template=vue 時，只支持初始化全棧 Vue 應用，不支持僅初始化靜態 Vue 應用。這對於不想用雲函數的團隊來說，很不方便。
優化靜態網站托管緩存
將 cloudPath 從 /a 更改到 /b 時， /a 依然能請求到靜態資源。而我們期望的是“覆蓋”： /a 下不能請求到靜態資源。
如果你在部署過程中，遇到了問題，或者希望我們能支持新功能，歡迎 issues 反饋~~
當然，也歡迎更多的小伙伴加入，共建社區生態。
Github 開源地址：https://github.com/TencentCloudBase/cloudbase-framework
歡迎給我們點個 star，幫助我們做得更好。
【產品介紹】雲開發（Tencent CloudBase，TCB）是騰訊雲提供的雲原生一體化開發環境和工具平台，為開發者提供高可用、自動彈性擴縮的后端雲服務，包含計算、存儲、托管等serverless化能力，可用於雲端一體化開發多種端應用（小程序，公眾號，Web 應用，Flutter 客戶端等），幫助開發者統一構建和管理后端服務和雲資源，避免了應用開發過程中繁瑣的服務器搭建及運維，開發者可以專注於業務邏輯的實現，開發門檻更低，效率更高。