YouTip

In this chapter, you will learn how to package a locally developed blog project and deploy it for free on the internet to get a public access link. * * * ## Building Production Bundle When developing, run `npm run dev`, and Vite will start a local development server with hot reload support. However, for deployment, you need optimized small-sized files—this is production build. $ npm run build After execution, a `dist/` folder will be generated in the project root directory: dist/├── index.html # Entry HTML (resource references have been replaced with build paths)├── assets/│ ├── index-Df3aBc9x.js # Bundled JS (code is minified and tree-shaken)│ ├── index-Gh7jKl2m.css # Bundled CSS (extracted and minified)│ └── ... # Other resources├── posts.json # Files from public directory copied as-is└── favicon.ico # Other static resources Note several key changes: * File names contain hash (like `Df3aBc9x`), hash changes when content changes, used for browser cache control * Code has been minified and tree-shaken (unused code removed) * JS and CSS are split into separate files * Contents of `public/` directory are copied as-is to the root directory > To preview the build result, you can run `npx vite preview`, which will start the service locally in production mode to simulate the online environment. * * * ## Pushing Project to GitHub Deployment platforms (like Vercel) typically pull code from Git repositories and build automatically, so you need to upload the project to GitHub first. ### Step 1: Create GitHub Repository Click the + icon in the top right of GitHub website → New repository, fill in: * Repository name: blog-app * Set as Public (free deployment) * Do not check Initialize this repository with a README (since you already have project files locally) ### Step 2: Initialize Git Locally and Push $ cd blog-app $ git init $ git add . $ git commit -m "Initialize Blog Project" $ git branch -M main $ git remote add origin https://github.com/your-username/blog-app.git $ git push -u origin main After successful push, refresh the GitHub page and you will see all project files. > Before pushing, confirm that the `.gitignore` file includes `node_modules` and `dist`. node_modules should not be uploaded (it can be restored via npm install), and dist should be generated automatically by the build platform. * * * ## Deploying on Vercel Vercel is currently the most popular frontend deployment platform, with zero-configuration support for Vue/Vite projects. ### Deployment Steps 1. Visit [vercel.com](https://vercel.com/), register/login with GitHub account 2. Click "New Project" → Import Git Repository → select blog-app repository 3. Vercel will automatically identify the project as Vite (Vue), no configuration needed 4. Click "Deploy", wait a few tens of seconds, build completes 5. After successful deployment, you will get a link like: `https://blog-app.vercel.app` | Configuration | Value | Description | | --- | --- | --- | | Framework Preset | Vite | Auto-detected | | Build Command | npm run build | Auto-detected | | Output Directory | dist | Auto-detected | | Root Directory | ./ | Default project root directory | ### Automatic Deployment From now on, whenever you modify code locally and push to GitHub (`git push`), Vercel will automatically: 1. Detect new commits in the repository 2. Pull the latest code, execute npm install 3. Execute npm run build 4. Deploy to production environment The entire process requires no manual operation—push to deploy. * * * ## Custom Domain (Optional) Vercel provides free subdomains under `.vercel.app`, you can also bind your own domain. 1. Go to Vercel project Dashboard → Settings → Domains 2. Enter your domain (e.g., blog.) 3. Follow the prompts to add CNAME record at your DNS provider pointing to `cname.vercel-dns.com` 4. Wait for DNS to take effect (usually a few minutes to a few hours), Vercel will automatically apply for SSL certificate * * * ## Next Learning Direction You have mastered the core skills of Vue3, here are advanced routes based on different goals: | Learning Direction | Suitable For | Recommended Starting Point | | --- | --- | --- | | TypeScript + Vue3 | Want to write more rigorous large-scale projects | Add TS type definitions to the project, start with props and store | | Nuxt.js | Need SEO or server-side rendering | Full-stack framework based on Vue3, files as routes, automatic SSR | | VueUse | Want ready-made Composables | Vue official recommended composition function collection, with 200+ utility functions | | Component Library | Quickly build admin backends | Element Plus, Naive UI, Ant Design Vue |