vercel

Vercel 是一家专注于前端开发和云端部署的科技公司 (成立于美国旧金山)

Vercel 它是一个免费的网站托管平台，也是我目前用过最好的网站托管平台，不仅仅可以部署静态网站，而且还可以部署动态网站，所以我们可以拿 vercel 充当你免费的服务器，主要有以下好处。

• 关联 github，只需要往 github 提交代码，它会自动获取最新的提交，然后自动部署
• 提供了免费的域名，省去了申请域名的问题，如果有自己的域名，还可以做个域名解析到这个平台上
• 提供了免费的 Https 证书，如果证书到期了，它会自动替换，完全不需要操心
• 傻瓜式的部署方式，它的操作非常简单，Vercel 提供了两种方式：通过命令行部署、通过 Vercel 提供管理后台部署，这期视频我们主要介绍通过命令行部署，因为命令行的部署方式更加简单

vercel一个域名构建多个项目

vercel 允许你使用同一个域名构建多个不同的应用程序。这是通过使用路由规则来实现的

• 路由规则允许你配置不同的路径（例如 /app1 和 /app2）分别映射到不同的应用程序。这样，用户就可以通过不同的路径访问这些应用程序。
• 例如，假设你的域名为 myapp.com，你想要使用该域名构建两个不同的应用程序：app1 和 app2。你可以在你的应用程序的 vercel.json 文件中添加如下路由规则：

json

{
  "routes": [
    {
      "src": "/app1/*",
      "dest": "/app1/index.html"
    },
    {
      "src": "/app2/*",
      "dest": "/app2/index.html"
    }
  ]
}

• 这样，用户就可以通过访问 myapp.com/app1 或 myapp.com/app2 来访问这两个应用程序

dest：表示目标路径

注意:

• vercel官方建议使用 Note: Please use cleanUrls, trailingSlash, redirects, rewrites 来替代routes
  • routes它也不能与上述任何属性结合使用

redirects

• 需要被重写的路径
• Vercel 支持路由重写功能，因此我们可以实现反向代理。

场景：打包输出路径在dist中，当url地址为demo/pages/xxx/xx的时候，会被重写为dist/demo/index.html

注意：demo的应用，如果不是在根目录下，就要配置好publicPath，publicPath表示所有资源的基础路径

• 如果访问的是xxx.com/demo/pages/xx/xxx
  • 则publicPath:'/demo/'

js

{
    "rewrites": [
    {
      "source": "/demo/pages/:type/:index",
      "destination": "/dist/demo/index.html"
    }
  ]
}

builds

• 配置需要构建的文件/文件夹

build配置项：

• src：表示需要被构建的文件或文件夹。这个属性是必需的。
• use：表示用于构建的工具。这个属性是必需的。

json

{
  "builds": [
    {
      "src": "dist/main.js",
      "use": "@vercel/node"
    }
  ]
}