Vite 0 到 1当然可以！下面是一份从 Vite 0.x 到 Vite 1.x 的系统性学习指南，适合前端开发者逐步

当然可以！下面是一份从 Vite 0.x 到 Vite 1.x 的系统性学习指南，适合前端开发者逐步掌握这个重要版本升级中的变化和最佳实践。

🎯 学习目标：理解 Vite 0 → Vite 1 的演进

通过本学习路径，你将：

掌握 Vite 1 相比 0.x 的核心改进
理解配置结构的变化及其原因
学会如何迁移旧项目
建立对现代 Vite 工程化思维的基础认知

📚 第一阶段：了解背景知识

1. 什么是 Vite？

Vite（法语“快”）是由尤雨溪（Vue.js 作者）创建的新型前端构建工具，利用浏览器原生 ES Modules + ESBuild 预构建，实现极快的启动和热更新。

核心优势：

✅ 极速冷启动（无需打包）
✅ 快速热模块替换（HMR）
✅ 内置支持 Vue / React / TypeScript / JSX / CSS 预处理器等

2. Vite 0.x vs Vite 1.x 对比

特性	Vite 0.x（实验阶段）	Vite 1.x（稳定版）
发布时间	2020 年中	2021 年 4 月
稳定性	实验性，API 不稳定	官方宣布稳定
插件系统	简单、非标准化	基于 Rollup 规范，标准化
配置方式	普通对象导出	支持 `defineConfig()` 类型提示
别名处理	`/@/` 特殊语法	使用标准 `resolve.alias`
TypeScript 支持	基础支持	更好类型推导与集成
生态插件	社区碎片化	官方推出 `@vitejs/plugin-*`

📌 关键点：
Vite 1 是从“实验原型”走向“生产可用”的里程碑版本。

📘 第二阶段：动手学习 Vite 1 新特性

✅ 步骤 1：初始化一个 Vite 1 项目

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

注意：使用 create vite@latest 可确保生成的是基于 Vite 1+ 的模板。

查看生成的文件结构：

my-vue-app/
├── index.html
├── src/
│   ├── main.js
│   ├── App.vue
│   └── components/
├── public/
├── vite.config.js
├── package.json
└── tsconfig.json (可选)

✅ 步骤 2：阅读并理解 `vite.config.js`

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src', // 或 path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    open: true
  }
})

🔍 重点学习内容：

概念	说明
`defineConfig()`	提供 IDE 自动补全和类型检查（TypeScript 友好）
`plugins: [vue()]`	使用官方插件注册框架支持
`resolve.alias`	符合 Rollup 规范的标准别名配置
`server.open`	启动时自动打开浏览器

💡 小技巧：尝试把 defineConfig 去掉，看看是否还能运行？对比是否有类型错误。

✅ 步骤 3：体验别名功能（Alias）

在代码中使用别名导入：

// src/components/HelloWorld.vue

// 使用 @ 指向 src/
import TheHeader from '@/components/TheHeader.vue'

同时确保 jsconfig.json 或 tsconfig.json 中有对应路径映射：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

✅ 效果：VSCode 能正确跳转文件，且运行无报错。

✅ 步骤 4：环境变量使用（`.env` 文件）

创建 .env.development 和 .env.production：

# .env.development
VITE_API_URL=http://localhost:8080/api

# .env.production
VITE_API_URL=https://api.example.com

在代码中读取：

console.log(import.meta.env.VITE_API_URL)

⚠️ 注意：

只有以 VITE_ 开头的变量才会暴露给客户端。
NODE_ENV、BASE_URL 等不再默认存在（这是 Vue CLI 的概念，不是 Vite 的）。

✅ 步骤 5：代理设置（解决跨域）

开发时经常需要代理 API 请求：

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  }
})

这样访问 /api/users 就会被转发到 http://localhost:5000/users。

🔁 第三阶段：从 Vite 0 迁移到 Vite 1（实战练习）

假设你有一个老项目使用 Vite 0.x，现在要升级。

🧩 示例：旧版配置（vite.config.js - v0）

module.exports = {
  alias: {
    '/@/': path.resolve(__dirname, 'src')
  },
  plugins: [],
  optimizeDeps: {
    include: ['vue', 'vue-router']
  }
}

🛠 升级为 Vite 1 格式

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')  // 移动到 resolve，去掉前后斜杠
    }
  },
  plugins: [],
  optimizeDeps: {
    include: ['vue', 'vue-router']
  }
})

🔍 修改源码中的导入语句

- import utils from '/@/utils/index.js'
+ import utils from '@/utils/index.js'

🧪 第四阶段：常见问题与调试技巧

问题	解决方案
页面空白，控制台报错 `/@/ not found`	检查别名是否改为 `@` 并更新所有导入路径
环境变量读不到	确保以 `VITE_` 开头，并用 `import.meta.env.VITE_XXX` 访问
HMR 不生效	清除缓存 `rm -rf node_modules/.vite` 后重启
插件报错	升级插件到支持 Vite 1 的版本，如 `@vitejs/plugin-react`

🧠 第五阶段：深入理解原理（选学）

💡 为什么 Vite 很快？

开发模式不打包

- 浏览器直接请求 /src/main.js
- Vite 按需转换（如 .vue, .ts），返回 ESM 给浏览器

预构建依赖（esbuild）

- 第一次启动时，Vite 用 esbuild 将 CommonJS / UMD 模块转成 ESM
- 存放在 node_modules/.vite

真正的按需加载

- 只编译你当前打开的页面所需模块

⚙️ 构建生产包仍使用 Rollup（速度快 + 成熟）

📖 推荐学习资源

类型	链接
官网文档	cn.vitejs.dev
GitHub Changelog	github.com/vitejs/vite…
Vite 1 发布公告	vitejs.dev/blog/announ…
Bilibili 视频教程	搜索 “Vite 入门”、“Vite 从零搭建项目”

✅ 总结：Vite 0 → Vite 1 学习清单

完成项	内容
✅	理解 Vite 的核心理念（快、ESM、HMR）
✅	掌握 `vite.config.js` 新写法（`defineConfig`, `resolve.alias`）
✅	学会使用 `@` 别名和路径映射
✅	理解环境变量规则（必须 `VITE_` 开头）
✅	配置代理解决开发跨域
✅	能迁移一个 Vite 0 项目到 Vite 1
✅	知道常见问题及排查方法

🤝 下一步建议

如果你想继续深入，可以尝试：

搭建一个多页面应用
集成 TypeScript + ESLint + Prettier
使用 vite build 构建生产包并部署
学习 Vite 插件开发基础

如果你愿意，我可以带你一步步做一个 “从零搭建 Vite 1 项目” 的完整教学 👨‍🏫
只需告诉我你想用的技术栈：Vue / React / Vanilla JS？

祝你学习顺利！🚀

Vite 0 到 1