雲開發靜態託管是雲開發提供的靜態網站託管的能力，靜態資源（HTML、CSS、JavaScript、字型等）的分發由騰訊雲物件儲存 COS 和擁有多個邊緣網點的騰訊雲 CDN 提供支援.

在雲開發靜態託管中，你同樣可以託管一個 Vue.js 專案，接下來，我就介紹一下應該如何將一個 Vue.js 專案部署到雲開發靜態網站託管服務中。

初始化一個 Vue 專案

首先，使用 Vue cli 建立一個專案，來作為演示。同時，為了符合日常使用場景，引入 Vue Router 元件，並配置 Router 為 Histroy 模式。

vue create cloudbase
cd cloudbase
vue add router
 

執行完成後，可以執行 npm run serve 啟動預覽，檢視一下效果

建立雲開發環境

完成了Vue 專案的建立後，接下來建立雲開發的環境,訪問雲開發控制檯,點選上方的新建環境，建立一個新的環境。在彈出的介面中輸入你的環境名稱，並選擇按量計費，點選下方的立即開通，就可以開通一個雲開發環境了。

等待環境初始化完成後，點選剛剛建立好的環境，進入到詳情頁，點選左側的環境設定，可以看到環境的 ID， 記住這裡的環境 ID，後續上傳檔案的時候會用到。

再次選擇左側列表的「靜態網站託管」

在靜態網站託管頁面選擇立即開通。

等待靜態網站託管服務開通後，你就可以看到這樣的介面。點選上方的「設定」，可以看到你的測試域名，後續上傳後，你就可以在這個測試域名中檢視你的站點。

初始化雲開發 Cli

完成了環境的建立後，接下來配置雲開發 Cli。

安裝雲開發 Cli 並登陸

首先，我們執行命令安裝雲開發 Cli

npm i -g @cloudbase/cli

安裝完成後， 執行命令登陸 Cli

tcb login

系統會自動開啟瀏覽器，你只需要在彈出的頁面中登陸你的騰訊雲賬號，並授予 Cli 許可權就可以操作了。

上傳檔案

完成了 Cli 的登陸後，接下來就可以上傳檔案了。首先，進入到 vue 專案的 dist 目錄:

cd dist

，然後，執行命令來上傳檔案

tcb hosting:deploy -e envId

這裡你需要將 envId 替換為你自己的環境 ID，比如我的替換為 website-126ca8，結果如下

可以看到，我成功的上傳了檔案，這個時候，我可以直接訪問我的測試域名來檢視我剛剛上傳的 Vue.js 專案。

當你看到這樣的介面時，就說明你配置成功了。

一些配置

在 Vue 中，我們常常會用到 Vue Router 的 History Mode 來做更好的 URL，但如果你不做任何配置，在雲開發的 Hosting 上就會導致訪問時出現 404 錯誤

這個問題可以通過在雲開發靜態網站託管的設定頁面將索引文件和錯誤文件均設定為 index.html 即可解決。

總結

雲開發的靜態託管中想要上傳 Vue 專案也十分簡單，你只需要初始化一個 Vue 專案，並使用雲開發的 CLi 工具就可以完成檔案的上傳。此外，還可以通過修改索引文件和錯誤文件來實現 Vue Router 的 History Mode 的支援。

公眾號：騰訊云云開發

騰訊云云開發：https://cloudbase.net

雲開發控制檯：https://console.cloud.tencent.com/tcb?from=12304

☁
更多精彩
掃描二維碼瞭解更多

相關推薦