無需修改業(yè)務(wù)代碼，就能將 Vue 應(yīng)用前后端一鍵托管部署在云開發(fā)平臺~

Cloudbase Framework 是云開發(fā)官方出品的前后端一體化部署工具。目前已經(jīng) 開源 。

關(guān)于 Cloudbase Framework 的介紹，發(fā)布過一篇 <a href="https://zhuanlan.zhihu.com/p/159302477">《云開發(fā)推出「前后端一體化部署工具」CloudBase Framework》。想必大家看完，一定都磨刀霍霍。今天就給大家?guī)硪黄獙崙?zhàn)文章，如何用 Cloudbase Framework 部署一個 Vue 項目。

準備工作

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

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

第二步：擁有騰訊云賬號、開通環(huán)境，獲得環(huán)境 ID

第三步：安裝 Cloudbase CLI

npm i -g @cloudbase/cli

檢查是否安裝成功。如果有版本輸出，就代表安裝成功了。

cloudbase -v

cloudbase 命令可以簡寫成 tcb（Tencent CloudBase 的簡稱）。

tcb -h 看看 cloudbase 有哪些能力。

總結(jié)下來，大概是這幾方面：

• 騰訊云賬號登錄、退出
• 云開發(fā)環(huán)境配置
• 應(yīng)用配置初始化與部署
• 云函數(shù)相關(guān)
• 文件上傳、下載、刪除、權(quán)限設(shè)置
• HTTP Service 相關(guān)

第四步：登錄 Cloudbase

輸入以下命令，會在瀏覽器打開騰訊云的授權(quán)頁面，點擊“確認授權(quán)”即可。

cloudbase login

準備工作都做好以后，我們就可以著手部署相關(guān)的工作了。

部署 Vue 應(yīng)用

總的來說，用 Cloudbase Framework 部署一個 Vue 應(yīng)用，只需要兩步。第一步：初始化項目配置；第二步，部署。

現(xiàn)有項目

如果你的項目已經(jīng)存在，在項目根目錄，執(zhí)行以下命令，生成項目配置。

cloudbase

選擇關(guān)聯(lián)環(huán)境后，會在項目根目錄，生成一個 cloudbasrc.json 文件。云開發(fā)環(huán)境 ID 會被寫進這個文件。

{ "envId": "static-176d4a" }

接下來，輸入以下命令，進行部署。

cloudbase framework deploy

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

1）安裝插件 @cloudbase/framework-plugin-website。在 cloudbaserc.json 里，你會發(fā)現(xiàn)執(zhí)行這個命令后，新增了這個插件。

2）讀取云開發(fā)環(huán)境 ID

3）讀取 publicPath，并將應(yīng)用資源托管到/下。因為 my-vue-app 是用 vue-cli 創(chuàng)建的項目，所以 publicPath 默認為"/"

4）打包

5）安裝 node_modules

6）部署

部署成功后，訪問地址：https://static-176d4a.tcloudbaseapp.com/

新項目

第一步：初始化項目

執(zhí)行以下命令，Cloudbase 除了會幫你生成項目配置外，還會初始化項目。

cloudbase init --template=vue

執(zhí)行命令后，會讓你選擇關(guān)聯(lián)環(huán)境、選擇云開發(fā)模板（Vue 應(yīng)用）、輸入項目名稱。這里，我們的項目名是 cloudbase-example。

需要注意的是，cloudbase 默認會創(chuàng)建一個全棧 Vue 應(yīng)用，如果你只想要一個靜態(tài) Vue 應(yīng)用，需要手動去掉云函數(shù)部分的代碼。

進入創(chuàng)建好的項目根目錄，瀏覽文件結(jié)構(gòu)你會發(fā)現(xiàn)和 cloudbase 相關(guān)的，除了 cloudbaserc.json 以外，還有一個 cloudfunctions 目錄。這個目錄就是云函數(shù)所在的目錄。在 cloudfunctions 目錄下有一個名為 vue-echo 的函數(shù)，這個云函數(shù)，稍后會用到。

cloudebaserc.json 里，會默認安裝兩個插件。之前提到的 @cloudbase/framework-plugin-website 和 云函數(shù)部署相關(guān)的 @cloudbase/framework-plugin-function

第二步（可跳過）：本地開發(fā)。

執(zhí)行npm i, 安裝 node_modules。

執(zhí)行npm run dev 。本地運行時，默認監(jiān)聽端口是 5000，publicPath 是 /vue。這些配置項均可在 package.json 里修改。

部署云函數(shù)： tcb functions:deploy vue-echo

點擊“調(diào)用 hello world 云函數(shù)”按鈕時，會調(diào)用 callFunction 這個方法。

而這個方法，會去調(diào)用名為“vue-echo” 的云函數(shù)。這個云函數(shù)做的就是“echo”的工作，返回一個對象，key 名為“event”, value 是你傳入的對象 { "foo": "bar" }

點擊按鈕，試試。你會發(fā)現(xiàn)返回結(jié)果已經(jīng)展現(xiàn)在頁面里了：

關(guān)于 cloudbase 的云函數(shù)，之后的文章會進一步說明，這里就不贅述了。

第三步：部署

默認 cloudPath 是 /vue。如果要修改靜態(tài)資源路徑，請在 cloudbaserc.json 里修改 cloudPath。

輸入以下命令，進行部署。

cloudbase framework deploy

部署成功

待優(yōu)化的地方

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

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

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

2）初始化項目，支持僅初始化靜態(tài) Vue 應(yīng)用。

目前執(zhí)行cloudbase init --template=vue 時，只支持初始化全棧 Vue 應(yīng)用，不支持僅初始化靜態(tài) Vue 應(yīng)用。這對于不想用云函數(shù)的團隊來說，很不方便。

3） 優(yōu)化靜態(tài)網(wǎng)站托管緩存

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

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

當然，也歡迎更多的小伙伴加入，共建社區(qū)生態(tài)。

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

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

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

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

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

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

技術(shù)交流加Q群：601134960

最新資訊關(guān)注微信公眾號【騰訊云云開發(fā)】

總結(jié)

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

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