Tencent CloudBase Framework Website Plugin

云开发 CloudBase Framework 框架「Function」插件： 通过云开发CloudBase Framework 框架将静态网站一键部署云开发环境，提供生产环境可用的 CDN 加速、自动弹性伸缩的高性能网站服务。可以搭配其他插件如 Node 插件、函数插件实现云端一体开发。

功能特性

• 节约成本: 资源伸缩，弹性扩缩容，灵活计费，极大节约资源成本
• 极简配置：自动检测框架，无须配置，同时支持没有使用框架的纯静态项目
• 框架支持: 无缝支持原生和前端框架构建的项目
  • Vue
  • React
  • Next SPA
  • Nuxt SPA
  • VuePress

使用方法

步骤一. 准备工作

具体步骤请参照准备云开发环境和 CloudBase CLI 命令工具

步骤二. 进入网站项目目录进行初始化

如果目前已有网站应用项目

cloudbase

如果想全新开始一个项目，可以直接执行 init 来从模板开始一个网站项目

cloudbase init

步骤三. 一键部署

cloudbase framework deploy

配置

默认情况下不需要任何配置即可使用，以下配置参数针对有特殊需求的场景

配置示例

cloudbase init 之后会创建云开发的配置文件cloudbaserc.json，可在配置文件的 plugins 里修改和写入插件配置

{"envId":"{{envId}}","framework": {"plugins": {"client": {"use":"@cloudbase/framework-plugin-website","inputs": {"installCommand":"npm install --prefer-offline --no-audit --progress=false","buildCommand":"npm run build","outputPath":"dist","cloudPath":"/path","ignore": [".git",".github","node_modules","cloudbaserc.js"]        }      }    }  }}

配置参数说明

commands

选填，对象格式

自定义命令，声明应用安装/构建的自定义命令，会在当前项目目录下进行执行

commands.install

安装命令，如npm install，没有可不传

默认值npm install --prefer-offline --no-audit --progress=false

commands.build

构建命令，如npm run build，没有可不传

outputPath

网站静态文件的路径。

cloudPath

静态资源部署到云开发环境的路径，默认为根目录。

ignore

静态资源部署时忽略的文件路径，支持通配符

默认值['.git', '.github', 'node_modules', 'cloudbaserc.js']

envVariables

环境变量键值对，会被注入到静态网站根目录下，可以在网页 html head 里加入一行代码来获取

<scriptsrc="/_init_tcb-env.js"></script>

在 JS 代码中就可以通过window._tcbEnv 来获取所有的变量

注入的环境变量有：

• TCB_ENV_ID: 当前环境的环境 ID
• TCB_SERVICE_DOMAIN: 当前环境的云开发 HTTP 访问的默认域名（云接入域名）
• TCB_REGION: 当前环境的地域
• 以及用户注入的其他envVariables

注意同一环境下不同 web 应用的变量会进行合并，可以在环境变量命名时加以区分

更多插件

请访问CloudBase Framework 插件列表 搭配使用其他插件

文档资料

• 云开发官网地址：https://cloudbase.net/
• 云开发静态网站开通指南：https://docs.cloudbase.net/hosting/
• 云开发控制台地址：https://console.cloud.tencent.com/tcb