Build & Deploy — Deploy to Vercel

In this chapter, you will learn how to package a locally developed blog project and deploy it to the internet for free, obtaining a public access link.

Build the production bundle

When developing, runnpm run dev, Vite will start a local development server, supporting hot updates.

But what is needed for deployment isoptimized, small-sized files— this is the production build.

$ npm run build

After running it, adist/folder will be generated in the project root directory:

dist/
├── index.html                # 入口 HTML（资源引用已被替换为构建后的路径）
├── assets/
│   ├── index-Df3aBc9x.js    # 打包后的 JS（代码已压缩、tree-shaking）
│   ├── index-Gh7jKl2m.css   # 打包后的 CSS（已提取、压缩）
│   └── ...                   # 其他资源
├── posts.json                # public 目录的文件原样复制
└── favicon.ico               # 其他静态资源

Note a few key changes:

• Filenames contain a hash (e.g.,Df3aBc9x); if the content changes, the hash changes, used for browser cache control
• The code has beenminified and tree-shaken(removing unused code)
• JS and CSS are split into separate files
• public/The contents of the directory are copied as-is to the root directory

To preview the build result, runnpx vite preview; it will start a local server in production mode to simulate the live environment.

Push the project to GitHub

Deployment platforms (like Vercel) usually pull code from a Git repository and build automatically, so you need to upload the project to GitHub first.

Step 1: Create a GitHub repository

Click the + in the top-right corner of the GitHub website → New repository, and fill in:

• Repository name：blog-app
• Set it to Public (for free deployment)
• Do not check "Initialize this repository with a README" (because you already have project files locally)

Step 2: Initialize Git locally and push

$ cd blog-app
$ git init
$ git add .
$ git commit -m "初始化博客项目"
$ git branch -M main
$ git remote add origin https://github.com/你的用户名/blog-app.git
$ git push -u origin main

After the push succeeds, refresh the GitHub page and you will see all the project files.

Before pushing, make sure.gitignorethe file already containsnode_modulesanddist. node_modules should not be uploaded (it can be restored via npm install), and dist should be automatically generated by the build platform.

Deploy on Vercel

Vercelis currently the most popular frontend deployment platform, with zero-config support for Vue/Vite projects.

Deployment steps

1. Visitvercel.com, register/log in with your GitHub account
2. Click "New Project" → Import Git Repository → select the blog-app repository
3. Vercel automatically detects that the project is Vite (Vue), no configuration needed
4. Click "Deploy", wait a few dozen seconds, the build completes
5. After deployment succeeds, you will get a link, such as:https://blog-app.vercel.app

Automatic deployment

From then on, whenever you modify code locally and push to GitHub (git push), Vercel will automatically:

1. Detect that the repository has new commits
2. Pull the latest code, run npm install
3. Run npm run build
4. Deploy to production

The whole process requires no manual action; push and it goes live.

Custom domain (optional)

Vercel provides.vercel.appfree subdomains, and you can also bind your own domain.

1. In the Vercel project Dashboard → Settings → Domains
2. Enter your domain (e.g., blog.example.com)
3. Follow the prompts to add a CNAME record at your DNS provider pointing tocname.vercel-dns.com
4. Wait for DNS to take effect (usually a few minutes to a few hours), Vercel will automatically apply for an SSL certificate

Next learning directions

You have mastered the core skills of Vue3. Below is an advanced path based on different goals: