共计 1806 个字符，预计需要花费 5 分钟才能阅读完成。
这篇文章主要讲解了“基于 Serverless 的 Vue Press 静态网站怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着丸趣 TV 小编的思路慢慢深入，一起来研究和学习“基于 Serverless 的 Vue Press 静态网站怎么实现”吧！
简单介绍一下：
VuePress：由两部分组成，第一部分是一个极简静态网站生成器；另一个部分是为书写技术文档而优化的默认主题。每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他页面则会只在用户浏览到的时候才按需加载。
Serverless Framework：在 GitHub 上有三万颗星，业界非常受欢迎的无服务器应用框架，开发者无需关心底层资源即可部署完整可用的 Serverless 应用架构。
接下来我们分三步进行：创建项目 → 配置 yml 文件 → 部署
▎工具准备
首先确保系统包含以下环境：
Node.js (Node.js 版本需不低于 8.6，建议使用 10.0 及以上版本)
Git
1. 安装 Serverless Framework
$ npm install -g serverless2. 安装 docsify
$ npm install -g vuepress▎创建项目
# 创建项目目录
mkdir vuepress-starter cd vuepress-starter
# 新建一个 markdown 文件
echo # Hello VuePress! README.md
# 开始写作
vuepress dev .
# 构建静态文件
vuepress build .这时候可以看到 ./vuepress-starter 目录下创建的 README.md 文档，它会做为主页内容渲染，直接编辑 docsify/README.md 就能更新网站内容。此时通过浏览器访问 http://localhost:8080/ 即可本地预览。
▎配置 yml 文件
在项目目录下，创建 serverless.yml 文件：
$ touch serverless.yml将以下内容写入上述的 yml 文件里：
# serverless.yml
myvuepress:
component: @serverless/tencent-website
inputs:
code:
src: ./dist # Upload static files
index: index.html
error: 404.html
region: ap-guangzhou
bucketName: my-bucket配置完成后，文件目录如下：
/vuepress-starter
├── .vuepress
| ├── dist
| | ├── 404.html
| | └── index.html
| └── serverless.yml
└── README.md▎部署
通过 serverless 命令（可使用命令缩写 sls）进行部署，添加 –debug 参数查看部署详情：
$ sls --debug如果你的账号未 登陆 或 注册 腾讯云，可以直接通过微信扫描命令行中的二维码，从而进行授权登陆和注册。这也是我觉得特别方便的一个地方！
部署过程中，terminal 显示信息示意：
$ sls
（此处有张二维码） Please scan QR code login from wechat.
Wait login...
Login successful for TencentCloud.
myvuepress:
url: http://my-bucket-1256526400.cos-website.ap-guangzhou.myqcloud.com
env:
59s › myvuepress › done访问命令行输出的 url，即可查看使用 Serverless Framework 部署的 VuePress 网站啦~
感谢各位的阅读，以上就是“基于 Serverless 的 Vue Press 静态网站怎么实现”的内容了，经过本文的学习后，相信大家对基于 Serverless 的 Vue Press 静态网站怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是丸趣 TV，丸趣 TV 小编将为大家推送更多相关知识点的文章，欢迎关注！
