云開發(fā) 部署 Vue.js 項目

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

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

初始化一個 Vue 項目

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

vue create cloudbase
cd cloudbase
vue add router

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

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

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

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

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

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

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

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

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

初始化云開發(fā) Cli

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

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

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

npm i -g @cloudbase/cli

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

tcb login

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

上傳文件

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

tcb hosting:deploy -e envId

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

可以看到，我成功的上傳了文件，這個時候，我可以直接訪問我的測試域名來查看我剛剛上傳的 Vue.js 項目。

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

一些配置

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

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

總結(jié)

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