凡科网免费做网站,个人可以做行业网站吗,网络营销与推广策划方案,网站建设贵州Vite 完整功能详解与 Vue 项目实战指南
Vite 是下一代前端开发工具#xff0c;由 Vue 作者尤雨溪开发#xff0c;提供极速的开发体验和高效的生产构建。以下是完整功能解析和实战示例#xff1a;一、Vite 核心功能亮点闪电般冷启动
基于原生 ES 模块#xff08;ESM#xf…Vite 完整功能详解与 Vue 项目实战指南
Vite 是下一代前端开发工具由 Vue 作者尤雨溪开发提供极速的开发体验和高效的生产构建。以下是完整功能解析和实战示例一、Vite 核心功能亮点闪电般冷启动
基于原生 ES 模块ESM按需编译启动时间与项目大小无关即时热更新HMR
毫秒级更新保留应用状态支持 Vue/JSX/CSS 的 HMR开箱即用支持
TypeScriptJSX/TSXCSS 预处理器Sass/Less/StylusPostCSSWeb Assembly优化构建
生产环境使用 Rollup 打包自动代码分割异步 chunk 优化插件系统
兼容 Rollup 插件生态官方插件vitejs/plugin-vue、vitejs/plugin-react 等二、完整 Vue 项目实战示例
项目结构
my-vue-app/
├── public/
│ └── favicon.ico
├── src/
│ ├── assets/
│ ├── components/
│ ├── store/ # Pinia 状态管理
│ ├── router/ # Vue Router
│ ├── views/
│ ├── App.vue
│ ├── main.js
│ └── style.css
├── .env # 环境变量
├── vite.config.js # Vite 配置
└── package.json1. 创建项目
npm create vitelatest
# 选择 Vue TypeScript
cd my-vue-app
npm install2. 配置 vite.config.js
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import path from pathexport default defineConfig({plugins: [vue()],resolve: {alias: {: path.resolve(__dirname, ./src)}},server: {port: 8080,proxy: {/api: {target: http://localhost:3000,changeOrigin: true,rewrite: path path.replace(/^\/api/, )}}},css: {preprocessorOptions: {scss: {additionalData: import /styles/variables.scss;}}},build: {rollupOptions: {output: {manualChunks(id) {if (id.includes(node_modules)) {return vendor}}}}}
})3. 集成 Vue Router
npm install vue-router4// src/router/index.js
import { createRouter, createWebHistory } from vue-router
import Home from /views/Home.vueconst routes [{ path: /, component: Home },{ path: /user/:id, component: () import(/views/User.vue),meta: { requiresAuth: true }}
]const router createRouter({history: createWebHistory(),routes
})export default router4. 集成 Pinia 状态管理
npm install pinia// src/store/user.js
import { defineStore } from piniaexport const useUserStore defineStore(user, {state: () ({name: Guest,isAdmin: false}),actions: {login(userData) {this.name userData.namethis.isAdmin userData.isAdmin}},getters: {welcomeMessage: (state) Hello, ${state.name}!}
})5. 组件示例 (带 TypeScript)
!-- src/components/UserCard.vue --
script setup langts
import { computed } from vue
import { useUserStore } from /store/userconst userStore useUserStore()
const welcomeMsg computed(() userStore.welcomeMessage)defineProps{userId: numbershowDetails: boolean
}()
/scripttemplatediv classuser-cardh3{{ welcomeMsg }}/h3slot nameheader /div v-ifshowDetails!-- 用户详情 --/div/div
/templatestyle scoped
.user-card {border: 1px solid #eee;padding: 1rem;border-radius: 8px;
}
/style6. 环境变量配置
# .env.development
VITE_API_BASEhttp://localhost:3000/api
VITE_DEBUG_MODEtrue# .env.production
VITE_API_BASEhttps://api.example.com// 使用环境变量
const apiBase import.meta.env.VITE_API_BASE7. 性能优化技巧
动态导入组件
const UserProfile defineAsyncComponent(() import(/components/UserProfile.vue)
)图片资源处理
!-- 自动转换小图片为 base64 --
img src/assets/logo.png altVite logo!-- 使用 ?url 获取资源 URL --
import largeImage from /assets/bg.jpg?url全局样式管理
// src/styles/main.scss
mixin flex-center {display: flex;justify-content: center;align-items: center;
}// vite.config.js 中全局引入8. 高级功能实现
SSR 支持 (vite-plugin-ssr)
npm install vite-plugin-ssr// vite.config.js
import ssr from vite-plugin-ssr/pluginexport default defineConfig({plugins: [vue(), ssr()]
})PWA 支持
npm install vite-plugin-pwaimport { VitePWA } from vite-plugin-pwaexport default defineConfig({plugins: [VitePWA({registerType: autoUpdate,manifest: {name: My Vue App,short_name: VueApp,theme_color: #ffffff}})]
})9. 调试与测试
// package.json
scripts: {dev: vite,build: vite build,preview: vite preview,test: vitest,coverage: vitest run --coverage
}10. 部署配置
// 静态部署 (GitHub Pages)
build: {outDir: docs,assetsDir: static
}// SPA 路由处理
export default defineConfig({build: {rollupOptions: {input: {main: path.resolve(__dirname, index.html),404: path.resolve(__dirname, 404.html)}}}
})三、Vite vs Webpack 优势对比特性ViteWebpack启动速度毫秒级随项目增长线性下降HMR 更新局部更新 50ms全量更新 1s构建原理ESM 按需编译 RollupBundle 打包配置复杂度极简配置复杂配置TS 支持原生支持需要 loader开发体验接近原生开发有打包等待
四、最佳实践建议
路由懒加载使用动态导入提升首屏速度CSS 模块化避免全局样式污染Tree-shaking确保组件库支持 ESM按需导入对大型库使用 unplugin-auto-importCDN 优化通过 build.rollupOptions.external 分离依赖
// 自动导入示例 (vite.config.js)
import AutoImport from unplugin-auto-import/viteexport default defineConfig({plugins: [AutoImport({imports: [vue,vue-router,pinia],dts: src/auto-imports.d.ts})]
})通过以上配置和示例你可以快速构建一个现代化的 Vue 3 应用享受 Vite 带来的极致开发体验
