这篇文章主要讲解了“基于Serverless的Vue按静态网站怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“基于Serverless的Vue按静态网站怎么实现”吧!
<强>简单介绍一下:
VuePress:由两部分组成,第一部分是一个极简静态网站生成器;另一个部分是为书写技术文档而优化的默认主题。每一个由VuePress生成的页面都带有预渲染好的HTML,也因此具有非常好的加载性能和搜索引擎优化(搜索引擎优化),同时,一旦页面被加载,Vue将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他页面则会只在用户浏览到的时候才按需加载。
<李>Serverless框架:在GitHub上有三万颗星,业界非常受欢迎的无服务器应用框架,开发者无需关心底层资源即可部署完整可用的Serverless应用架构。
接下来我们分三步进行:<>强创建项目→配置yml文件→部署
▎工具准备
首先确保系统包含以下环境:
节点。js(节点。js版本需不低于8.6,建议使用10.0及以上版本)
<李> Git
<强> 1。安装Serverless框架
<>之前,美元npm install -g Serverless<强> 2。安装docsify
<>之前,美元npm install -g vuepress▎创建项目
#,创建项目目录 mkdir vuepress-starter ,, cd vuepress-starter #,新建一个,markdown 文件 echo & # 39; #, Hello VuePress ! & # 39;,祝辞README.md #,开始写作 vuepress dev 。 #,构建静态文件 vuepress build 。
这时候可以看到。/vuepress-starter目录下创建的<代码> README。md 文档,它会做为主页内容渲染,直接编辑<代码> docsify/README。md>
▎配置yml文件
在项目目录下,创建<代码> serverless。yml 文件:
<>之前,美元touch serverless。yml将以下内容写入上述的yml文件里:
#, serverless.yml myvuepress: ,,组件:“@serverless/tencent-website" 输入:才能 ,,,代码: ,,,,,src:,。/dist # Upload static 文件 ,,,,,指数:index . html ,,,,,错误:404. . html ,,,地区:ap-guangzhou ,,,bucketName:,我的桶
配置完成后,文件目录如下:
/vuepress-starter ,,├──,.vuepress |才能,,,,├──,dist |才能,,,,|,,,├──,404. html |才能,,,,|,,,└──,index . html |才能,,,,└──,serverless.yml └才能──,自述。md
▎部署
通过<代码> serverless 命令(可使用命令缩写<代码> sls> ——调试> <>之前,美元sls ——调试
如果你的账号未登陆或注册腾讯云,可以直接通过微信扫描命令行中的二维码,从而进行授权登陆和注册。这也是我觉得特别方便的一个地方。
部署过程中,终端显示信息示意:
<>之前,美元sls ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,(此处有张二维码) Please 才能scan QR code login 得到微信只 Wait 才能登录… Login 才能successful for TencentCloud又是; ,,,myvuepress:, ,,,,,网址:http://my,桶- 1256526400. - cos - website.ap guangzhou.myqcloud.com ,,,,,env:, ,,59 s ? myvuepress ?,做访问命令行输出的url,即可查看使用Serverless框架部署的VuePress网站啦~
