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

最開始了解到Nuxt是在vue SSR下了解到，用過之后感覺真香。 可以省去路由劃分的時間，Nuxt.js 會讀取該目錄下所有的 .vue 文件并自動生成對應(yīng)的路由配置、進一步封裝Vuex等等。下面來介紹如何將Nuxt部署到靜態(tài)托管上？

云開發(fā)（Tencent CloudBase，TCB）}是云端一體化的后端云服務(wù) ，采用 serverless 架構(gòu)，免去了移動應(yīng)用構(gòu)建中繁瑣的服務(wù)器搭建和運維。同時云開發(fā)提供的靜態(tài)托管、命令行工具（CLI）、Flutter SDK 等能力極大的降低了應(yīng)用開發(fā)的門檻。

環(huán)境要求

• node.js

工具準備

• Nuxt腳手架： create-nuxt-app

• 云開發(fā)命令工具： cloudbase/cli

安裝

安裝Nuxt腳手架

npm i create-nuxt-app

安裝云開發(fā)命令工具 CLI

npm i -g @cloudbase/cli

測試 cloudbase/cli 是否安裝成功 可以使用cloudbase或tcb命令

cloudbase -v

或

tcb -v

創(chuàng)建Nuxt項目

npx create-nuxt-app demo

緊接著進入到項目目錄下（這里是demo）

1. 在命令行下執(zhí)行npm run generate生成靜態(tài)html文件

1. 在項目目錄中會生成一個dist文件夾。該文件夾下的文件就是生成的靜態(tài)文件

將 Nuxt 靜態(tài)網(wǎng)站托管到云開發(fā)

首先我們打開 云開發(fā)

選擇或創(chuàng)建自己的云開發(fā)環(huán)境

這里要注意選擇是按量計費的模式(只有按量計費才能開通靜態(tài)網(wǎng)站托管)。

創(chuàng)建成功后會自動對環(huán)境進行初始化(此過程大概2~3分鐘)。

初始化成功后我們進到對應(yīng)的環(huán)境中找到靜態(tài)網(wǎng)站托管并開始使用

等待靜態(tài)網(wǎng)站服務(wù)初始化后就可以使用啦~

接下來我們就可以將nuxt的靜態(tài)網(wǎng)站上傳到云開發(fā)靜態(tài)網(wǎng)站托管了。

首先執(zhí)行登錄命令

tcb login

在彈出的頁面進行授權(quán)

接著，將靜態(tài)網(wǎng)站進行部署到云開發(fā)靜態(tài)網(wǎng)站托管

這里我們將dist文件夾下的所有文件都部署到靜態(tài)網(wǎng)站托管中，執(zhí)行命令

tcb hosting:deploy 文件夾 -e 云環(huán)境ID

這里的文件夾是將此文件夾下所有的文件都部署到云開發(fā)的根目錄中，云環(huán)境ID可在環(huán)境ID下查看

因為我們希望將dist下的所有文件部署上去，所以上面的命令我們可以寫成

tcb hosting:deploy ./dist -e demo-1cdbae

上傳成功后我們會發(fā)現(xiàn)，靜態(tài)網(wǎng)站托管中多了許多文件

那我們?nèi)绾螢g覽呢？

云開發(fā)默認提供了一個與環(huán)境對應(yīng)的默認域名，可以通過這個默認域名進行訪問。

這樣至此我們的Nuxt就部署成功啦

但默認域名存在限制下行速度10KB/S，如果正式使用的話需要添加一個已經(jīng)備案的域名

并為其添加dns解析

如果可以ping通這個CNAME就可以進行使用自己的域名進行訪問啦~~