無需修改業務代碼，就能將 Vue 應用前后端一鍵托管部署在云開發平臺~

Cloudbase Framework 是云開發官方出品的前后端一體化部署工具。目前已經 開源 。

關于 Cloudbase Framework 的介紹，發布過一篇 <a href="https://zhuanlan.zhihu.com/p/159302477">《云開發推出「前后端一體化部署工具」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

這個命令會做以下幾件事：

1）安裝插件 @cloudbase/framework-plugin-website。在 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 里修改。

部署云函數： 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

部署成功

待優化的地方

在體驗過程中，用戶反饋了這些問題，我們之后會逐步優化。

1）初始化新項目時，支持自動安裝 node_modules

目前執行cloudbase init --template=vue 時，是不會執行npm install的腳本來安裝 node_modules 的。

2）初始化項目，支持僅初始化靜態 Vue 應用。

目前執行cloudbase init --template=vue 時，只支持初始化全棧 Vue 應用，不支持僅初始化靜態 Vue 應用。這對于不想用云函數的團隊來說，很不方便。

3） 優化靜態網站托管緩存

將 cloudPath 從 /a 更改到 /b 時， /a 依然能請求到靜態資源。而我們期望的是“覆蓋”： /a 下不能請求到靜態資源。

如果你在部署過程中，遇到了問題，或者希望我們能支持新功能，歡迎 issues 反饋~~

當然，也歡迎更多的小伙伴加入，共建社區生態。

Github 開源地址：https://github.com/TencentCloudBase/cloudbase-framework

歡迎給我們點個 star，幫助我們做得更好。

【產品介紹】云開發（Tencent CloudBase，TCB）是騰訊云提供的云原生一體化開發環境和工具平臺，為開發者提供高可用、自動彈性擴縮的后端云服務，包含計算、存儲、托管等serverless化能力，可用于云端一體化開發多種端應用（小程序，公眾號，Web 應用，Flutter 客戶端等），幫助開發者統一構建和管理后端服務和云資源，避免了應用開發過程中繁瑣的服務器搭建及運維，開發者可以專注于業務邏輯的實現，開發門檻更低，效率更高。

開通云開發：<https://console.cloud.tencent.com/tcb?tdl_anchor=techsite>

產品文檔：<https://cloud.tencent.com/product/tcb?from=12763>

技術文檔：<https://cloudbase.net?from=10004>

技術交流加Q群：601134960

最新資訊關注微信公眾號【騰訊云云開發】

總結

以上是生活随笔為你收集整理的vue请求在退出页面还执行吗_如何用 Cloudbase Framework 部署一个 Vue 项目的全部內容，希望文章能夠幫你解決所遇到的問題。

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