从零启动 Vue + Vite：分清 dev、build 和 preview

Vue 负责组织组件与响应式界面，Vite 提供开发和构建工具。第一次搭建项目时，比记住所有配置更有用的是先走通一条完整路径：创建项目、修改页面、构建产物，再验证部署后的访问方式。

创建一个小而明确的项目

先安装满足当前 Vite 要求的 Node.js 版本。要求会随工具版本变化，创建前查看官方入门文档；终端出现引擎版本警告时，应先解决运行环境，而不是忽略提示继续安装。

在存放项目的目录中执行以下命令。这里的 vue 模板使用 JavaScript；需要 TypeScript 时可以换成 vue-ts：

node --version
npm create vite@latest my-vue-blog -- --template vue
cd my-vue-blog
npm install
npm run dev

如果脚手架询问是否自动安装并启动，可以选择手动处理，再执行后面的步骤。浏览器地址以终端实际输出为准，端口被占用时开发服务器可能使用另一个端口。-- 后面的参数会传给创建工具，不是 npm 自身的选项。

打开 src/App.vue 修改模板，保存后观察页面更新。可以从一个最小组件开始，确认事件和响应式行为都工作，再增加路由、状态库或样式工具，避免一开始就引入暂时用不到的依赖。

三个命令分别负责什么

模板的 package.json 通常包含下面的脚本。项目的入口配置可以变化，但这三个命令的职责要分清：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

dev 启动开发服务器，提供适合本地编辑的模块处理与热更新。它让修改代码和查看结果形成短循环，并不代表已经生成了用于发布的最终文件。

build 读取源码并生成生产产物，默认输出到 dist。对于普通客户端 Vue 项目，这些 HTML、CSS、JavaScript 和静态资源可以交给静态托管平台或 Web 服务器。构建结束不意味着网站已上传，也不意味着已有进程在对外提供服务。

preview 在本地提供已构建的产物，适合发布前检查。运行它之前应先构建；修改源码后也要重新构建，否则看到的可能仍然是上一次的结果。Vite 明确不把 preview 定位为生产服务器。

npm run build
npm run preview

发布前检查路径与路由

如果网站部署在域名根目录，默认的 base: '/' 通常适用；如果发布到 /blog/ 这样的子路径，需要同步配置资源基础路径。下面示例保留 Vue 插件并增加 base：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/blog/',
})

base 解决的是构建资源的公共路径，不会自动配置服务器路由。使用 Vue Router 的 history 模式时，可以将 import.meta.env.BASE_URL 传给 createWebHistory()；托管端仍需为前端路由配置恰当的入口回退。否则站内点击正常，直接打开深层链接却可能返回 404。

用真实访问方式验收

在预览环境中检查首页、图片、字体和控制台错误，再直接打开并刷新一条深层路由。发布到 Cloudflare Pages 等静态平台后，重复这些动作，并检查浏览器网络面板里的资源状态码。

普通静态项目发布的是 dist 内容。若应用需要服务端渲染或独立 API，则还需要对应的运行环境，不能只凭本地开发成功就判断部署完成。

继续阅读：Vite 开始与静态部署指南。