最开始了解到 Nuxt 是在 vue SSR 下了解到, 用过之后感觉真香. 可以省去路由划分的时间, Nuxt.JS 会读取该目录下所有的 .vue 文件并自动生成对应的路由配置, 进一步封装 Vuex 等等. 下面来介绍 \ color{red}{ 如何将 Nuxt 部署到静态托管上?}
\color{#4285f4}{ 云开发 (Tencent CloudBase,TCB)} 是云端一体化的后端云服务 , 采用 serverless 架构, 免去了移动应用构建中繁琐的服务器搭建和运维. 同时云开发提供的静态托管, 命令行工具(CLI),Flutter SDK 等能力极大的降低了应用开发的门槛.
环境要求
node.JS
工具准备
Nuxt 脚手架: create-nuxt-App
云开发命令工具: @cloudbase/cli
安装
安装 Nuxt 脚手架
NPM i create-nuxt-App
安装云开发命令工具 CLI
NPM i -g @cloudbase/cli
测试 cloudbase/cli 是否安装成功 可以使用 cloudbase 或 tcb 命令
cloudbase -v
或
tcb -v
更多命令可以移步全部命令
或运行命令
tcb -h
创建 Nuxt 项目
npx create-nuxt-App demo
创建过程详细请参考文档 https://zh.nuxtjs.org/guide/installation
紧接着进入到项目目录下(这里是 demo)
在命令行下执行 NPM run generate 生成静态 html 文件
在项目目录中会生成一个 dist 文件夹. 该文件夹下的文件就是生成的静态文件
image.PNG
到此 Nuxt 部分就已经搞定了, 现在要做的就是怎样将这个静态网站托管到云开发?
首先我们打开 云开发 https://cloud.tencent.com/product/tcb?from=10680
tcb.PNG
选择或创建自己的云开发环境
image.PNG
这里要注意选择是按量计费的模式(只有按量计费才能开通静态网站托管).
image.PNG
创建成功后会自动对环境进行初始化(此过程大概 2~3 分钟).
image.PNG
初始化成功后我们进到对应的环境中找到静态网站托管并开始使用
image.PNG
等待静态网站服务初始化后就可以使用啦~
接下来我们就可以将 nuxt 的静态网站上传到云开发静态网站托管了.
首先执行登录命令
- tcb login
- image.PNG
在弹出的页面进行授权
image.PNG
接着, 将静态网站进行部署到云开发静态网站托管
这里我们将 dist 文件夹下的所有文件都部署到静态网站托管中, 执行命令
tcb hosting:deploy 文件夹 -e 云环境 ID
这里的文件夹是将此文件夹下所有的文件都部署到云开发的根目录中, 云环境 ID 可在环境 ID 下查看
image.PNG
因为我们希望将 dist 下的所有文件部署上去, 所以上面的命令我们可以写成
- tcb hosting:deploy ./dist -e demo-1cdbae
- image.PNG
上传成功后我们会发现, 静态网站托管中多了许多文件
image.PNG
那我们如何浏览呢?
云开发默认提供了一个与环境对应的默认域名, 可以通过这个默认域名进行访问.
- image.PNG
- image.PNG
\color{green}{这样至此我们的 Nuxt 就部署成功啦~}
但默认域名存在限制下行速度 10KB/S, 如果正式使用的话需要添加一个已经备案的域名
image.PNG
并为其添加 dns 解析
- image.PNG
- image.PNG
如果可以 ping 通这个 CNAME 就可以进行使用自己的域名进行访问啦~~
来源: https://www.qcloud.com/developer/article/1612580