云開(kāi)發(fā) 部署 Nuxt.js 項(xiàng)目

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

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

環(huán)境要求

• node.js

工具準(zhǔn)備

• Nuxt腳手架： create-nuxt-app

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

安裝

安裝Nuxt腳手架

npm i create-nuxt-app

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

npm i -g @cloudbase/cli

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

cloudbase -v

或

tcb -v

創(chuàng)建Nuxt項(xiàng)目

npx create-nuxt-app demo

緊接著進(jìn)入到項(xiàng)目目錄下（這里是demo）

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

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

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

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

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

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

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

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

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

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

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

tcb login

在彈出的頁(yè)面進(jìn)行授權(quán)

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

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

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

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

因?yàn)槲覀兿Ｍ麑ist下的所有文件部署上去，所以上面的命令我們可以寫(xiě)成

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

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

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

云開(kāi)發(fā)默認(rèn)提供了一個(gè)與環(huán)境對(duì)應(yīng)的默認(rèn)域名，可以通過(guò)這個(gè)默認(rèn)域名進(jìn)行訪問(wèn)。

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

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

并為其添加dns解析

如果可以ping通這個(gè)CNAME就可以進(jìn)行使用自己的域名進(jìn)行訪問(wèn)啦~~