[TOC] # Vite | 概念      | 作用                     | 用法             | | --------- | ------------------------ |-----------------| |打包工具   | 显著提高开发环境启动速度  |`npm init vite@latest`| |模块热重载| 修改源代码后,浏览器会热重载更新|支持HMR| |按需编译  |只编译用到的代码            |通过 rollup.js 来实现 |  |优化的开发服务器|更快启动、更好体验         |Vite 启动服务器,无需中间 bundle        | |条理清晰的API   |易于配置和扩展            |rollup.config.js 替代                |  |完全类型化   |增强开发体验              |TypeScript 支持                 | ## 构建更加复杂的项目 ### 1. 多页面应用支持 :在 vite.config.js 中配置多个入口,可以构建多页面应用。 ``` js export default { build: { rollupOptions: { input: { main: resolve(__dirname, 'index.html'), about: resolve(__dirname, 'about.html') } } } } ``` ### 2. Library 模式 :可以将 Vite 用来构建 library,通过 externals 配置,避免打包第三方依赖。 ``` js export default { build: { lib: { entry: resolve(__dirname, 'src/main.js'), name: 'MyLib', fileName: (format) => `my-lib.${format}.js` }, rollupOptions: { // 确保外部化处理那些你不想打包进库的依赖 external: ['vue'] } } } ``` ### 3. 插件 API :Vite 提供了插件 API,可以编写自定义插件。插件可以在开发和构建过程中的不同阶段注入自定义逻辑。 ``` js export default function myPlugin() { const symbol = Symbol('some symbol') return { name: 'my-plugin', config() { /* ... */ }, configResolved(config) { /* ... */ }, handleHotUpdate() { /* ... */ }, transform(code, id) { /* ... */ }, generateBundle() { /* ... */ }, writeBundle() { /* ... */ } } } ``` ### 4. 环境变量和模式 :可以基于 mode 选项,设置不同的环境变量,在代码中使用 import.meta.env 来访问。 ``` js // vite.config.js export default { mode: 'development', define: { 'process.env': { NODE_ENV: '"development"' } } } ``` ``` js // src/main.js console.log(import.meta.env.NODE_ENV) // Prints "development" ``` ### 5. 路径别名 :可以在 vite.config.js 中设置路径别名,简化 import 语句。 ``` js export default { resolve: { alias: { '@components': '/src/components' } } } ``` ``` js import MyComponent from '@components/MyComponent.vue' ``` 掌握这些高级特性,可以让我们构建更加复杂和规模化的 Vue 项目。Vite 是 Vue 生态中的前沿工具,值得我们深入学习和实践。