Vue.js静态站点部署-Vercel +GitHub

文章简介：本文是使用Vercel + Github部署静态站点的笔记

准备工作

本地创建静态站点，并完成静态站点相应代码的编写。

使用背景

静态站点完成以后，需要部署到线上，如果使用传统的部署方式，每次代码更新都需要在本地重新打包构建，然后替换服务器上的代码包，这种方式对于更新不频繁的站点是可取的。一旦站点更新的频繁，这种方式就很繁琐，很费人力。这里采用Vercel + Github方式部署。

Vercel + Github部署优势：

Vercel + Github部署，一旦Github上的代码更新了，会自动触发Vercel重新打包构建，从而保证线上线下功能同步，大大地简化部署流程。

Vercel缺陷：
Vercel适合静态应用的构建部署，不适合需要从外部获取动态数据的网站。

上传代码

将本地代码上传到github仓库。

部署站点

1、浏览器端打开Vercel官网登录页，选择github账号登录。

2、进入Vercel首页 > 点击【Import Third-Party Git Repository 】

3、在Vercel页面中填写项目的github地址

注意：这里的地址是项目github的页面地址，不是github仓库地址。

4、将项目github账号和Vercel关联起来，以便代码更新之后，Vercel自动打包部署（个人理解）。

5、使用Vercel构建

从以上Vercel构建页面可以看出：

• vercel会自动根据导入的项目自动识别所使用的的框架，支持修改
• vercel默认的构建命令是npm run build 或 gridsome build
• vercel构建默认的输出目录是dist
• 以上构建命令和输出目录支持重写，还可以设置环境变量

点击页面右下角的【deploy】，开始构建，以下页面说明构建成功，点【visit】即可访问。

可以成功访问到页面，本次构建部署就成功了，后期更新github上的代码便可触发Vercel自动打包部署，操作简单方便。

标签：GitHub,部署,github,站点,Vue,构建,Github,js,Vercel
来源： https://blog.csdn.net/weixin_41269811/article/details/113656763