雲開發靜態托管是雲開發提供的靜態網站托管的能力，靜態資源（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
☁
更多精彩
掃描二維碼了解更多
