日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告：魔扣目錄網為廣大站長提供免費收錄網站服務，提交前請做好本站友鏈：【 網站目錄：http://www.ylptlb.cn 】， 免友鏈快審服務（50元/站），

點擊這里在線咨詢客服
新站提交
  • 網站：51998
  • 待審：31
  • 小程序：12
  • 文章：1030137
  • 會員：747

Vite 配置篇：日常開發掌握這些配置就夠了！

發布時間：2023-07-02 22:42:29 作者：網友整理

不知道有沒有這樣的兄弟，學習 Vite 的時候，官網上各種配置看的是眼花繚亂。不知道哪些需要掌握，哪些只用簡單了解一下。為了提高大家的效率，我把項目中常用的配置梳理了一下分享給大家，希望對你上手 Vite 有所幫助。話不多說，開干！

css.preprocessorOptions

傳遞給 CSS 預處理器的配置選項，這些配置會傳遞到預處理器的執行參數中去。例如，在 scss 中定義一個全局變量：

// vite.config.js
import { defineConfig } from 'vite' // 使用 defineConfig 工具函數獲取類型提示：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;` // 全局變量
      }
    }
  }
})

我們也可以定義一個全局變量文件，然后再引入這個文件：

// src/assets/styles/variables.scss
$injectedColor: orange;
$injectedFontSize: 16px;
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '/src/assets/styles/variables.scss';` // 引入全局變量文件
      }
    }
  }
})

這樣在 .scss 文件或 .vue 文件中就可以使用這些變量了。

css.postcss

PostCSS 也是用來處理 CSS 的，只不過它更像是一個工具箱，可以添加各種插件來處理 CSS 。像瀏覽器樣式兼容問題、瀏覽器適配等，都可以通過 PostCSS 來解決。

Vite 對 PostCSS 有良好的支持，我們只需要安裝相應的插件就可以了。如移動端使用 postcss-px-to-viewport 對不同設備進行布局適配：

npm install postcss-px-to-viewport -D
// vite.config.js
import { defineConfig } from 'vite'
import postcssPxToViewport from 'postcss-px-to-viewport'

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        // viewport 布局適配
        postcssPxToViewport({
          viewportWidth: 375
        })
      ]
    }
  }
})

這樣我們書寫的 px 單位就會轉為 vw 或 vh ，很輕松地解決了適配問題。

resolve.alias

定義路徑別名也是我們常用的一個功能，我們通常會給 scr 定義一個路徑別名：

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 路徑別名
    }
  }
})

我們也可以使用插件，來自動給 src 和 src 下所有的文件夾定義路徑別名：

// vite.config.js
import { defineConfig } from 'vite'
import { ViteAliases } from './node_modules/vite-aliases' // 通過名稱引入會報錯，可能是插件問題

export default defineConfig({
  plugins: [
    ViteAliases()
  ]
})

相應的路徑別名如下：

src -> @
  assets -> @assets
  components -> @components
  router -> @router
  stores -> @stores
  views -> @views
  ...

resolve.extensions

導入時想要省略的擴展名列表。默認值為 ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'] 。

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    extensions: ['.js', '.ts', '.json'] // 導入時想要省略的擴展名列表
  }
})

注意：不建議忽略自定義導入類型的擴展名（例如：.vue），因為它會影響 IDE 和類型支持。

optimizeDeps.force

是否開啟強制依賴預構建。node_modules 中的依賴模塊構建過一次就會緩存在 node_modules/.vite/deps 文件夾下，下一次會直接使用緩存的文件。而有時候我們想要修改依賴模塊的代碼，做一些測試或者打個補丁，這時候就要用到強制依賴預構建。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    force: true // 強制進行依賴預構建
  },
})

除了這個方法，我們還可以通過刪除 .vite 文件夾或運行 npx vite --force 來強制進行依賴預構建。

server.host

指定服務器監聽哪個 IP 地址。默認值為 localhost ，只會監聽本地的 127.0.0.1 。當我們開發移動端項目時，需要在手機瀏覽器上訪問當前項目。這時候可以將 host 設置為 true 或 0.0.0.0 ，這樣服務器就會監聽所有地址，包括局域網和公網地址。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    host: true // 監聽所有地址
  }
})

效果如下：

 

5e157d5a4ca827d5dafbc354ff135e1.png

當手機和電腦處于同一個網絡環境下，我們就可以通過下面那個地址進行訪問了。

server.proxy

反向代理也是我們經常會用到的一個功能，通常我們使用它來進行跨域：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      // 字符串簡寫寫法
      '/foo': 'http://localhost:4567',
      // 選項寫法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      },
      // 正則表達式寫法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/fallback/, '')
      },
      // 使用 proxy 實例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的實例
        }
      },
      // Proxying websockets or socket.io
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }
  }
})

base

開發或生產環境服務的公共基礎路徑。可以是以下幾種值：

  • 絕對 URL 路徑，例如 /foo/
  • 完整的 URL，例如 https://foo.com/
  • 空字符串或 ./（用于嵌入形式的開發）
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  base: '/foo/' // 開發或生產環境服務的公共基礎路徑
})

build.outdir

指定打包文件的輸出目錄。默認值為 dist ，當 dist 被占用或公司有統一命名規范時，可進行調整。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    outDir: 'build' // 打包文件的輸出目錄
  }
})

build.assetsDir

指定生成靜態資源的存放目錄。默認值為 assets ，可根據需要進行調整。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    assetsDir: 'static' // 靜態資源的存放目錄
  }
})

build.assetsInlineLimit

圖片轉 base64 編碼的閾值。為防止過多的 http 請求，Vite 會將小于此閾值的圖片轉為 base64 格式，可根據實際需求進行調整。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    assetsInlineLimit: 4096 // 圖片轉 base64 編碼的閾值
  }
})

plugins

插件相信大家都不陌生了。我們可以使用官方插件，也可以社區插件。如使用 @vitejs/plugin-vue 提供 Vue3 單文件組件的支持，使用 vite-plugin-mock 讓我們更輕松地 mock 數據。

npm i mockjs -S
npm i vite-plugin-mock -D
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    vue(),
    viteMockServe()
  ]
})

更多社區插件，大家可以查看 awesome-vite 。當然如果有特殊需求，我們也可以自己寫一個插件。后續我也會帶大家手寫一個自己的插件。

完整代碼

// vite.config.js
import { defineConfig } from 'vite' // 使用 defineConfig 工具函數獲取類型提示：
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  base: '/foo/', // 開發或生產環境服務的公共基礎路徑
  optimizeDeps: {
    force: true // 強制進行依賴預構建
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '/src/assets/styles/variables.scss';` // 引入全局變量文件
      }
    },
    postcss: {
      plugins: [
        // viewport 布局適配
        postcssPxToViewport({
          viewportWidth: 375
        })
      ]
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 路徑別名
    },
    extensions: ['.js', '.ts', '.json'] // 導入時想要省略的擴展名列表
  },
  server: {
    host: true, // 監聽所有地址
    proxy: {
      // 字符串簡寫寫法
      '/foo': 'http://localhost:4567',
      // 選項寫法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      },
      // 正則表達式寫法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/fallback/, '')
      },
      // 使用 proxy 實例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的實例
        }
      },
      // Proxying websockets or socket.io
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }
  },
  build: {
    outDir: 'build', // 打包文件的輸出目錄
    assetsDir: 'static', // 靜態資源的存放目錄
    assetsInlineLimit: 4096 // 圖片轉 base64 編碼的閾值
  },
  plugins: [
    vue(),
    viteMockServe()
  ]
})

小結

其實日常開發掌握這些配置就足夠了，如果遇到特殊的場景我們再去查文檔就可以，而不需要一開始就把所有配置都學習一遍。Vite 配置整體來說和 Webpack 大同小異，只不過 Vite 更傻瓜式，把能做的基本都幫我們做好了。我們只用修改少量配置，甚至不用修改配置，就可以滿足日常開發的需求。

你還知道哪些常用的配置呢，歡迎在評論區留言。也歡迎關注我的合集 Vue3 特訓營 ，后面我會分享更多 Vue3 和 Vite 相關的知識。

如果本文對你有所幫助，記得點個贊呦！

參考資料：Vite 官方中文文檔

分享到：
標簽：Vite
用戶無頭像

網友整理

注冊時間：

網站：5 個   小程序：0 個  文章：12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號，推廣您的網站吧！
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲，玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題，題庫，初中，高中，大學四六

運動步數有氧達人2018-06-03

記錄運動步數，積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定