全栈开发最优解：Vue + Vercel + Supabase 快速搭建入门

全栈快速开发
文章会有一个todo的例子快速搭建项目，全程只需要点点，复制粘贴，耗时不过10min。

背景

最近对独立开发很感兴趣，关注了idoubi ，开发很多出海产品。他分享他使用的技术栈是next.js + vercel + supabase，开发了很多投入生产的 AI 产品。考虑到 next.js / React 在国内使用的不多。我简单使用 vue + vercel + supabase 搭建一个简单模板（快速搭建教程）。

国内开发太卷且用户付费意愿比较低，手续也很复杂，越来越多独立开发转向海外。

我简单总结这样搭配的优劣

优势：

• 快速开发：自动化的 CI/CD 流程，无需后端，快速部署
• 白嫖（免费）：Vercel 和 Supabase 都有免费计划，适合小型项目和个人开发。
• 技术简单：vue，不用倒腾服务器

劣势

• 可能不太灵活
• 网络问题（cdn加速）

面向不想折腾后端，服务器部署的，尽快搭建起项目演示，初期项目验证。

前提:
注册 vecel，github，supabase
电脑装有node，git 环境

Vercel 创建项目

使用 verce l中自带的模板创建vue-vite

新项目 — New Project (vercel.com)
在里面搜索，选用 vue-vite

点击 deploy 部署
选择github：vercel是和github深度绑定的，当进行一次git提交，vercel会自动deploy，非常方便。
点击创建 create

等待不到20s，就部署完成了。

网页成功部署起来，非常简单迅速

在我们的github账号中，会显示该项目

添加图片描述](https://i-blog.csdnimg.cn/direct/46da49299de149c3b5b4623d01bf20f8.png)

直接将项目clone到本地

git clone your-project.git

安装依赖，运行项目

npm i 
npm run dev

vercel中默认选择的是pnpm ，建议安装，个人觉得比npm好用些

npm install -g pnpm

集成 Supabase

回到项目面板 dash --> 点击存储 storage -->再点击create database
vercel已经为我们提供好现成的方案，我们直接在vercel中 集成 supabase。（我这里以前配置过，会显示）

=QQ_1732524957709.png&pos_id=img-M0S4VUHt-1732597308077)
这里我们就选新加坡，网络可能是问题，supabase免费项目只能创建两个，好在开源，后面自己部署也是非常简单。

注意这里的环境变量前缀 prefix，一定要带上使用的框架，VITE，不然框架会找不到环境变量的
具体其他框架部分，可以直接查看文档，这里是vite。

下面界面，就是成功连接上supabase

/img-home.csdnimg.cn/images/20230724024159.png?origin_url=QQ_1732525738365.png&pos_id=img-au1gtWOk-1732597308078)
Open in supabase,进入supabase的管理页面

在supabase的SQL Editor中 执行这段 sql 命令

创建一个带id，title等字段的todos表，和规定访问权限，插入些数据。
如果你不喜欢这样写代码，supabase也有丰富点的可视化操作。

create table todos (
  id bigint generated by default as identity primary key,
  title text,
  is_complete boolean default false,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null

);

alter table todos enable row level security;
create policy "Anyone can view todos" on todos for
    select using (true);
create policy "Anyone can add new todos" on todos for
    insert with check (true);
insert into todos(title)
values
  ('Create Supabase project'),
  ('Create Vercel project'),
  ('Install Supabase integration');

项目开发

前置工作

全局安装 vercel cli

npm i -g vercel

登陆vercel

vercel login

连接我们刚刚创建的vercel项目

vercel link

拉取环境变量,环境变量中存储一些连接supabase的信息，在我们在vercel中连接supbase时，已经自动创建了，可以在vecel中的项目面板setting中的environment中查看（记得环境变量需要VITE的前缀,否则vite不能识别环境变量）
如果你还不知道环境变量是什么，为什么使用环境变量，建议先问AI。

vercel env pull

拉取完环境变量后，文件中出现.env.local,在我们本地连接调试时候有用，.gitignore中自动忽略它，不会上传到云端。
接下来我们，

下载supabase-js

pnpm add @supabase/supabase-js

写代码

创建文件夹和文件 src/utils/supabase.js，在supabase中编写

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)

export default supabase

创建 src/components/Todo.vue

<script setup>
import { ref,onMounted } from 'vue'
import supabase from '../utils/supabase'

const list = ref([])

async function getTodoList() {
  const { data } = await supabase.from('todos').select('*')
  list.value = data
}

onMounted(() => {
  getTodoList()

})

</script>
  
<template>
  <ul>
    <li v-for="n in list" :key="n.id" > {{ n.title }}</li>
  </ul>
</template>

更多操作，可以查看非常详细的官方文档

App.vue

<script setup>
import Todo from './components/Todo.vue'
</script>

<template>
  <Todo></Todo>
</template>

运行项目

npm run dev

本地，正确渲染

git 提交代码（直接vscode的图形化操作），vercel 会自动部署，非常方便
g-home.csdnimg.cn/images/20230724024159.png?origin_url=QQ_1732544299880.png&pos_id=img-G7RM9EaC-1732597308079)

打开网页就行了

如果你部署失败，错误信息，可以在这查看日志
一般可能错误：

• 环境变量
• 依赖安装

本项目开源public，已上传 github
项目地址 ：jihe520/vite-vue-vercel-supabase-template (github.com)

如果有什么不懂的，可以问我，也可以直接查阅官方文档，文档很详细。
文章有问题，请指正。

扩展阅读

• 开始使用 Vercel — Get started with Vercel
• Supabase Docs