结合serverless和nuxt发布一个简单线上博客

涵盖功能

• serverless 部署 nuxt 服务
• nuxt 项目
  • PWA （渐进式 Web 应用程序）旨在使用现有的 Web 技术提供用户更优的使用体验。
  • Nuxt 颜色模式切换 自动根据系统颜色模式完成网页的颜色模式切换
  • SSR 服务端渲染，更好的SEO

serverless 部署 nuxt 服务

登录腾讯云后台，找到 Serverless 应用中心，新建应用，选择nuxt模板创建成功之后，在函数管理控制台下载代码或者直接在函数代码开发（建议下载到本地开发）;腾讯云会自动在nuxt模板里面生成 serverless.yml；后面可以自己按需求配置；关于SECRET_ID，SECRET_KEY的相关东西也会在 env 中保存

在本地代码开发完之后全局安装 serverless

npm install -g serverless

在 serverless.yml 文件所在的项目根目录，运行以下指令，将会弹出二维码，直接扫码授权进行部署

serverless deploy

关于serverless的发布流程就这些，当然在serverless后台也可以配置自己的域名；serverless的缺点就是冷启动速度，第一次访问的时候冷启动时间较长，当然这个跟serverless的特性相关，像腾讯云和阿里云的serverless都会提供免费资源使用量和调用量，部署一个小型博客还是可以的。

渐进式 Web 应用程序

1. 安装@nuxtjs/pwa
2. 配置 pwa； pwa默认所需图标是static/icon.png， 若修改了文件位置或命名,如static/icon2.png，则需要配置icon；

关于 icon 配置 @nuxtjs/pwa插件会自动根据 static/icon.png 生成[64, 120, 144, 152, 192, 384, 512]大小的图片，并且会自动在mainfest生成对应的icons配置； manifest 是支持站点在主屏上创建图标的技术方案，并且定制 PWA 的启动画面的图标和颜色等

// nuxt.config.js 配置 
export default {
  // ...head
  buildModules: ["@nuxtjs/pwa"],
  pwa: {
    icon: {
      source: "/icon.png",  //路径为static中的icon.png
      fileName: 'icon.png'
    },
    
    manifest: {
      name: "我是名字",
      short_name: "我是名字",
      lang: "zh-CN",
      theme_color: "#fff", 
      description:
        "我是描述"
    },
    // workbox: {        //开发环境取消注释,调试pwa, 打包时注释
    //   dev: true 
    // }
  },
}

关于mainfest最后生成的json如下

{
  "name": "我是名字",
  "short_name": "我是名字缩写",
  "description": "描述...",
  "start_url": "/",
  "display": "standalone",
  "orientation": "any",
  "background_color": "#ffffff",
  "theme_color": "#8a00f9",
  "icons": [
    {
      "src": "images/icons/icon_32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon_72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon_128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon_144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon_256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

mainfest.json 属性

• name — 网页显示给用户的完整名称;
• short_name — 这是为了在没有足够空间显示 Web 应用程序的全名时使用;
• description — 关于网站的详细描述;
• start_url — 网页的初始相对 URL 比如 /）
• display — 应用程序的首选显示模式;
  • fullscreen - 全屏显示;
  • standalone - 应用程序将看起来像一个独立的应用程序;
  • minimal-ui - 应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏;
  • browser - 该应用程序在传统的浏览器标签或新窗口中打开.
• orientation — 应用程序的首选显示方向;
• background_color — 启动屏的背景颜色;
• theme_color — 网站的主题颜色;
• icons — 定义了 src、sizes 和 type 的图片对象数组,各种环境中用作应用程序图标的图像对象数组；

@nuxtjs/pwa 最后会自动在生成的 html 里加上manifest.json链接；会自带hash

<!-- @nuxtjs/pwa会自动在生成的 html 页面中添加以下 link 标签 -->
<link rel="manifest" href="/manifest.json" />

Nuxt 颜色模式切换

1. 安装@nuxtjs/color-mode
2. 配置

// nuxt.config.js 配置 
export default {
  buildModules: ['@nuxtjs/color-mode'],
}

接下来是 css | less | sass 样式的开发，在nuxt.config.js的css模块引入对应的 css | less | sass 文件

/* 初始化颜色变量 */
:root {
  --color: #243746;
  --color-primary: #158876;
  --color-secondary: #0e2233;
  --bg: #f3f5f4;
  --bg-secondary: #fff;
  --border-color: #ddd;
}
/* dark暗色变量 */
.dark-mode {
  --color: #ebf4f1;
  --color-primary: #41b38a;
  --color-secondary: #fdf9f3;
  --bg: #091a28;
  --bg-secondary: #071521;
  --border-color: #0d2538;
}
/* sepia护眼颜色变量 */
.sepia-mode {
  --color: #433422;
  --color-secondary: #504231;
  --bg: #f1e7d0;
  --bg-secondary: #eae0c9;
  --border-color: #ded0bf;
}

// 我自己的是在main.less维护颜色变量
export default {
  css: ['@/assets/style/main.less'],
}

接下来就是各模块的样式或者全局背景色，主要是根据定义的颜色变量；例如

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: var(--bg);
  color: var(--color);
  transition: background-color .3s;
}
a {
  color: var(--color-primary);
}

切换颜色模式，主要通过 $colorMode\mathrm{.}preference\text{来控制颜色模式，}$colorMode.preference来控制颜色模式，colorMode是@nuxtjs/color-mode帮我们注册的全局变量，可以在任何组件都可以访问

核心还是通过html上的class来控制全局变量来实现颜色模式切换

它通过以下方式注入$colorMode帮助程序：

• preference：选择了实际的色彩模式（可以是'system'），对其进行更新以更改用户首选的色彩模式
• value：有助于了解何时检测到哪种颜色模式$colorMode === 'system'，因此您不应该对其进行更新
• unknown：了解在SSR或生成期间是否需要渲染一个占位符很有用
• forced：有助于了解当前页面是否强制使用当前颜色模式（用于隐藏颜色选择器）

<template>
  <div>
    <h1>Color mode: {{ $colorMode.value }}</h1>
    <select v-model="$colorMode.preference">
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="sepia">Sepia</option>
    </select>
  </div>
</template>

<style>
body {
  background-color: #fff;
  color: rgba(0,0,0,0.8);
}
.dark-mode body {
  background-color: #091a28;
  color: #ebf4f1;
}
.sepia-mode body {
  background-color: #f1e7d0;
  color: #433422;
}
</style>

nuxt项目地址 github.

体验地址 blog.