[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 生態中的前沿工具,值得我們深入學習和實踐。