Vite 快速上手教程

第三章Vite 快速上手教程3.1 环境准备安装 Node.js# 检查版本需要 16node-vnpm-v选择包管理器# npm默认npminstall-gnpmlatest# yarnnpminstall-gyarn# pnpm推荐npminstall-gpnpm3.2 创建第一个 Vite 项目方式一使用 npm createnpmcreate vitelatest方式二指定项目名和模板# 交互式选择npmcreate vitelatest my-vite-app# 直接指定模板npmcreate vitelatest my-vue-app ----templatevuenpmcreate vitelatest my-react-app ----templatereactnpmcreate vitelatest my-vanilla-app ----templatevanilla可用模板模板说明vanilla原生 JavaScriptvanilla-ts原生 TypeScriptvueVue 3 JavaScriptvue-tsVue 3 TypeScriptreactReact 18 JavaScriptreact-tsReact 18 TypeScriptpreactPreactlitLitsvelteSvelte3.3 项目结构my-vite-app/ ├── .gitignore # Git 忽略文件 ├── index.html # 入口 HTML重要 ├── package.json # 项目配置 ├── vite.config.js # Vite 配置文件 ├── public/ # 静态资源不经过构建 │ └── vite.svg └── src/ # 源码目录 ├── main.js # 入口文件 ├── style.css # 全局样式 ├── App.jsx # 根组件 └── assets/ # 资源文件会经过构建 └── logo.svg关键点index.html在项目根目录Vite 将其视为源码的一部分。3.4 运行项目# 安装依赖npminstall# 启动开发服务器npmrun dev# 构建生产版本npmrun build# 预览生产构建npmrun preview3.5 基础配置示例vite.config.jsimport{defineConfig}fromviteimportvuefromvitejs/plugin-vueimportpathfrompathexportdefaultdefineConfig({plugins:[vue()],// 路径别名resolve:{alias:{:path.resolve(__dirname,./src),}},// 开发服务器配置server:{port:3000,open:true,// 自动打开浏览器proxy:{/api:{target:http://localhost:8080,changeOrigin:true,}}},// 构建配置build:{outDir:dist,sourcemap:false,minify:terser,}})3.6 添加依赖和功能安装路由以 Vue 为例npminstallvue-router4// src/router/index.jsimport{createRouter,createWebHistory}fromvue-routerimportHomefrom../views/Home.vueconstroutes[{path:/,component:Home},]exportdefaultcreateRouter({history:createWebHistory(),routes,})安装 UI 组件库# Element Plus (Vue)npminstallelement-plus# Ant Design (React)npminstallantd3.7 使用 CSS 预处理器# Sass/SCSSnpminstall-Dsass# Lessnpminstall-Dless# Stylusnpminstall-Dstylus/* App.scss */$primary-color:#42b983;.app{color:$primary-color;}3.8 环境变量创建 .env 文件# .envVITE_API_URLhttp://localhost:8080VITE_APP_TITLEMy App# .env.productionVITE_API_URLhttps://api.example.com使用环境变量// 客户端代码中console.log(import.meta.env.VITE_API_URL)console.log(import.meta.env.MODE)// development/productionconsole.log(import.meta.env.DEV)// true in devconsole.log(import.meta.env.PROD)// true in prod3.9 静态资源处理导入方式// 导入图片importlogofrom./assets/logo.png// 动态导入constimgUrlnewURL(./assets/logo.png,import.meta.url).href// 在 HTML 中使用img src/vite.svg/!--public目录--img:srclogo/!--导入的图片--3.10 常见问题解决问题 1端口被占用// vite.config.jsserver:{port:3000,strictPort:true// 如果端口被占用则退出}问题 2跨域问题server:{proxy:{/api:http://localhost:8080}}问题 3路径别名不生效// 需要配置 resolve.aliasresolve:{alias:{:/src}}3.11 部署指南构建项目npmrun build部署到静态服务器# 使用 servenpx serve-sdist# 使用 Pythonpython-mhttp.server3000--directorydist部署到 Netlify/Vercel直接连接 GitHub 仓库构建命令npm run build输出目录dist本章小结通过本章你已经可以✅ 创建和运行 Vite 项目✅ 理解项目结构✅ 配置开发服务器✅ 使用环境变量和静态资源✅ 部署生产应用下一步学习配置详解深入掌握 Vite 的每一个配置项。