云開(kāi)發(fā)靜態(tài)托管是云開(kāi)發(fā)提供的靜態(tài)網(wǎng)站托管的能力，靜態(tài)資源（HTML、CSS、JavaScript、字體等）的分發(fā)由騰訊云對(duì)象存儲(chǔ) COS 和擁有多個(gè)邊緣網(wǎng)點(diǎn)的騰訊云 CDN 提供支持

在云開(kāi)發(fā)靜態(tài)托管中，你同樣可以托管一個(gè) Vue.js 項(xiàng)目，接下來(lái)，我就介紹一下應(yīng)該如何將一個(gè) Vue.js 項(xiàng)目部署到云開(kāi)發(fā)靜態(tài)網(wǎng)站托管服務(wù)中。

初始化一個(gè) Vue 項(xiàng)目

首先，我們使用 Vue cli 創(chuàng)建一個(gè)項(xiàng)目，來(lái)作為演示。同時(shí)，為了符合我們的日常使用場(chǎng)景，引入 Vue Router 組件，并配置 Router 為 Histroy 模式。

vue create cloudbase
cd cloudbase
vue add router

執(zhí)行完成后，可以執(zhí)行 npm run serve 啟動(dòng)預(yù)覽，查看一下效果

看完效果以后，可以執(zhí)行 npm run build 來(lái)構(gòu)建出最終的產(chǎn)出物

可以看到，我們的最終產(chǎn)出物被構(gòu)建在了 dist 目錄中，后續(xù)我們只要上傳這個(gè)目錄就好了。

創(chuàng)建云開(kāi)發(fā)環(huán)境

完成了Vue 項(xiàng)目的創(chuàng)建后，接下來(lái)創(chuàng)建云開(kāi)發(fā)的環(huán)境,訪問(wèn)云開(kāi)發(fā)控制臺(tái),點(diǎn)擊上方的新建環(huán)境，創(chuàng)建一個(gè)新的環(huán)境。在彈出的界面中輸入你的環(huán)境名稱(chēng)，并選擇按量計(jì)費(fèi)，點(diǎn)擊下方的立即開(kāi)通，就可以開(kāi)通一個(gè)云開(kāi)發(fā)環(huán)境了。

等待環(huán)境初始化完成后，點(diǎn)擊剛剛創(chuàng)建好的環(huán)境，進(jìn)入到詳情頁(yè)，點(diǎn)擊左側(cè)的環(huán)境設(shè)置，可以看到環(huán)境的 ID， 記住這里的環(huán)境 ID，后續(xù)上傳文件的時(shí)候會(huì)用到。

再次選擇左側(cè)列表的「靜態(tài)網(wǎng)站托管」

在靜態(tài)網(wǎng)站托管頁(yè)面選擇立即開(kāi)通。

等待靜態(tài)網(wǎng)站托管服務(wù)開(kāi)通后，你就可以看到這樣的界面。點(diǎn)擊上方的「設(shè)置」，可以看到你的測(cè)試域名，后續(xù)上傳后，你就可以在這個(gè)測(cè)試域名中查看你的站點(diǎn)。

初始化云開(kāi)發(fā) Cli

完成了環(huán)境的創(chuàng)建后，接下來(lái)配置云開(kāi)發(fā) Cli。

安裝云開(kāi)發(fā) Cli 并登陸

首先，我們執(zhí)行命令安裝云開(kāi)發(fā) Cli

npm i -g @cloudbase/cli

安裝完成后， 執(zhí)行命令登陸 Cli

tcb login

系統(tǒng)會(huì)自動(dòng)打開(kāi)瀏覽器，你只需要在彈出的頁(yè)面中登陸你的騰訊云賬號(hào)，并授予 Cli 權(quán)限就可以操作了。

上傳文件

完成了 Cli 的登陸后，接下來(lái)就可以上傳文件了。首先，進(jìn)入到 vue 項(xiàng)目的 dist 目錄: cd dist，然后，執(zhí)行命令來(lái)上傳文件

tcb hosting:deploy -e envId

這里你需要將 envId 替換為你自己的環(huán)境 ID，比如我的替換為 website-126ca8，結(jié)果如下

可以看到，我成功的上傳了文件，這個(gè)時(shí)候，我可以直接訪問(wèn)我的測(cè)試域名來(lái)查看我剛剛上傳的 Vue.js 項(xiàng)目。

當(dāng)你看到這樣的界面時(shí)，就說(shuō)明你配置成功了。

一些配置

在 Vue 中，我們常常會(huì)用到 Vue Router 的 History Mode 來(lái)做更好的 URL，但如果你不做任何配置，在云開(kāi)發(fā)的 Hosting 上就會(huì)導(dǎo)致訪問(wèn)時(shí)出現(xiàn) 404 錯(cuò)誤

這個(gè)問(wèn)題可以通過(guò)在云開(kāi)發(fā)靜態(tài)網(wǎng)站托管的設(shè)置頁(yè)面將索引文檔和錯(cuò)誤文檔均設(shè)置為 index.html 即可。

總結(jié)

云開(kāi)發(fā)的靜態(tài)托管中想要上傳 Vue 項(xiàng)目也十分簡(jiǎn)單，你只需要初始化一個(gè) Vue 項(xiàng)目，并使用云開(kāi)發(fā)的 CLi 工具就可以完成文件的上傳。此外，還可以通過(guò)修改索引文檔和錯(cuò)誤文檔來(lái)實(shí)現(xiàn) Vue Router 的 History Mode 的支持。