Vue3+Vite从零搭建个人网站：完整部署到云服务器

Vue3是当前最流行的前端框架之一，采用渐进式设计理念，学习曲线平缓。你不需要一次性学习所有概念——从最基础的模板语法和响应式数据开始，逐步学习组件化、路由、状态管理等高级特性。Vue3的Composition API让代码组织更灵活，TypeScript支持也更完善。对于一个人开发的小型网站来说，Vue3的开发效率和代码可维护性远超传统HTML/CSS/JS的开发方式。

Vite是新一代前端构建工具，解决了Webpack开发体验的痛点。冷启动从几十秒缩短到毫秒级，热更新（HMR）几乎是即时的。用Vite开发时的体验就像直接打开一个HTML文件一样快，但拥有完整的模块化开发能力。Vite基于原生ES模块，生产构建使用Rollup，打包产物体积小、加载快。对于个人开发者来说，Vite的开发体验远超Webpack，配置也更简单。

TailwindCSS是原子化CSS框架的革命性代表。传统CSS开发需要命名class、管理样式文件、处理样式冲突，而TailwindCSS提供了预定义的工具类（如bg-slate-900、text-white、rounded-xl、hover:bg-purple-700），你只需要在HTML元素上组合这些工具类就能完成所有样式工作。不需要写自定义CSS、不需要纠结命名、不需要切换文件。根据实际使用统计，TailwindCSS能让CSS开发效率提升3倍以上。这三者的组合是2026年个人开发者搭建静态网站的最优技术选型——轻量、快速、免费、开发效率极高。

项目创建只需要几条命令。第一步：在终端执行npm create vite@latest my-site -- --template vue-ts，这会创建一个Vue3+TypeScript的Vite项目模板。第二步：进入项目目录执行npm install安装依赖，再执行npm install -D tailwindcss @tailwindcss/postcss安装TailwindCSS v4（2026年最新版本）及其PostCSS插件。第三步：在项目的style.css文件中添加@import "tailwindcss"，TailwindCSS就可以使用了。

页面开发采用组件化的思路。创建HomePage.vue（首页）、BlogPage.vue（干货指南列表）、BlogPostPage.vue（文章详情）、AboutPage.vue（关于页面）等组件，使用vue-router管理路由切换。每个组件内部使用TailwindCSS的工具类进行布局和样式设计。不需要单独写任何CSS文件，所有样式都通过TailwindCSS工具类完成。

开发阶段使用npm run dev启动开发服务器，Vite会在毫秒内启动并在浏览器中打开项目。每次保存文件修改，浏览器会自动刷新显示最新效果。这种即时的开发反馈让效率大幅提升。开发过程中建议参考TailwindCSS官方文档（tailwindcss.com）查阅可用的工具类——文档非常清晰，几乎覆盖了所有CSS属性对应的工具类。

SSG（Static Site Generation，静态站点生成）是个人网站部署的最佳方案。传统的SPA（单页应用）需要浏览器先加载JavaScript框架，再通过JS渲染页面内容——搜索引擎爬虫很难正确抓取这种动态内容。而SSG在构建阶段就把每个页面预渲染为完整的HTML文件，搜索引擎可以直接读取所有内容。安装vite-ssg插件后，在main.ts中配置ViteSSG和路由即可启用。

SSG的好处是多方面的：SEO友好——搜索引擎可以直接抓取完整HTML内容，不再受限于JS渲染；加载速度快——不需要加载Vue框架和JS bundle，首屏加载几乎瞬间完成；部署简单——生成的纯静态文件可以部署在任何Web服务器上（Nginx、Apache、CDN、GitHub Pages、Vercel等），不需要Node.js运行环境。对于内容为主的个人网站/干货指南/产品展示站，SSG是2026年的最佳实践方案。

SEO优化要点：每个页面使用VueUse的useHead函数设置独立的title、description、og:title、og:description等meta标签；添加canonical URL指定页面的权威链接；生成sitemap.xml提交给百度站长平台和Google Search Console；确保每个页面有唯一的h1标题和清晰的语义化HTML结构。AGIDH的网站就是使用这套技术栈搭建的——Vue3+Vite+TailwindCSS+vite-ssg，整体开发周期约1周，部署后百度和Google都快速完成了收录。

构建生产版本：在项目根目录执行npx vite-ssg build，vite-ssg会自动遍历所有路由、预渲染每个页面、输出到dist目录。dist目录中包含完整的静态HTML文件、CSS文件、JS文件和静态资源，可以直接部署到任何Web服务器。构建完成后，先在本地用npx serve dist预览确认一切正常，然后再上传到服务器。

服务器选择和配置：推荐购买轻量级云服务器（阿里云/腾讯云/火山引擎，2核2G配置约50-70元/月），安装Ubuntu系统。SSH连接服务器后，安装Nginx。编辑Nginx配置文件，配置server块指向你的网站目录。关键配置：try_files $uri $uri.html $uri/ =404;这行配置支持无扩展名URL访问，不需要加.html后缀。

上传部署：在本地将dist目录打包为tar.gz，用scp命令上传到服务器。在服务器上解压到网站目录。域名解析：在你的域名注册商后台添加A记录，指向服务器IP地址。SSL证书：使用Let Encrypt免费的Certbot工具，一行命令即可申请和配置SSL证书，支持自动续期。整个部署流程熟练后可以在10分钟内完成。